I don’t fully understand the difference between the dynamic groceries and the dynamic groceries with cloning examples, could you talk a little more about the differences in how they work?


Why is the type in var box1 = $('<input>').attr('type','radio').attr('value','wzly'); in quotes but the class here: let spanItem = $(""<span>"", {class: ""item""}).text(item); can be not in quotes? Is it because the first one uses attr and the second one uses the second argument of $?
 
"Can you explain the foreach in this a bit more please: function initDOM() {
    groceries.forEach( (elt) => addDomElement(elt.item, elt.amount));
}"

element.closest() finds the closest element up the ancestor chain. What can we do if we want more than one parent or the 2nd closest ancestor with the specified CSS selector from the given element?

Could you show an example of creating a template then cloning from it? I think I understand the different parts, but I'm a little shaky on how they would be put into practice together.

When would we use jQuery over cloning to build dynamic pages? It seems to me that cloning is more preferred since it scales. 

In question 5, did you mean "duplicating the template" instead of "duplicating the clone"? I didn't select that option because you don't clone the clone, but I'm not sure if that was meant to be the question.

Just in case I get #5 wrong, my understanding of "clone the HTML stuff inside the template" and "clone the template" (from the summary) is not the same as "duplicating the clone", since at this point we don't have the clone yet right? We are cloning the HTML and not another clone, so I didn't choose that option.

Overall, it would just be helpful to practice using jQuery in conjunction with DOM elements are shown in the reading. Also, the details of the tree got a bit blurry in the code for a delegated click handler to delete an item. If possible, it would be helpful to have a visualization of what this code does with the closest and find methods in the code snippet. 


Event delegation

I am still a bit confused about how delegation works; and if clones can't have ids, what do we do if we want to change the CSS of a specific clone/dynamic elements

event bubbling, event delegation.

I am still a little confused about attributes and delegation. 

"Are the three ""item"" here pointing to the same item? or is elt.item different from the other two? 
function removeItem(item) {
    let index = groceries.findIndex( (elt) => elt.item == item );
"