Why there are no items to remove by the time the document is ready?


<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

for section 13/14, we are required to realize the function that when added items are clicked, they could be removed. Trying to use the following code:

$('.item').click(function() {

is incorrect . The explanation is that

when the DOM is loaded, so by the time your document is ready, it’s already decided there are no .items to .remove()

As I understand, when referring to ready, it is when the webpage firstly loaded at which no items are added. However, when we add some items, these items are added into html DOM. So does that mean that $(document).ready() only execute one time and will not refresh after new items are added? Then here comes the controversy: the webpage will always refresh after new items are added. I am not sure I understand this clearly.

<do not remove the three backticks above>

yes, you described it perfectly.

not when done with jquery or vanilla javascript

That is the great thing, we can manipulate the DOM without reloading the whole page

Jquery is a javascript library, if we use .click() the event is only added to the elements which are on the page from the beginning

on the other hand, if we use .on('click', function(){}) the click event will be added to elements which are added to the page dynamically. This has to do with the JS functions used by jquery

1 Like

Hmmm, thanks for your explanation! At first I thought that when DOM is changed the whole HTML content changes. But as you have explained, we can manipulate the DOM without reloading the whole page.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.