Quiz

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?

Sure. They are very similar, except in the small part of the code that builds the dynamic structure, namely addDomStructure. Let's look at both.

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 $?

Because object literals treat the keys as constants, not variables. Consider:


    let x = 3;
    let y = 4;
    let obj = {x: x, y: y};

BTW, there's a cute trick:


    let x = 3;
    let y = 4;
    let obj = {x, y};

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 );

the item argument is the thing we are looking for. The elt.item is the value in the dictionary.

Consider the equivalent Python code:


    def findIndex(item, some_list) {
       for i in range(len(some_list)):
          elt = groceries[i]
          if elt['item'] == item:
              return i

Can you explain the foreach in this a bit more please:
```
function initDOM() {
    groceries.forEach( (elt) => addDomElement(elt.item, elt.amount));
}
```
Glad to. It iterates over groceries (a list/array) and for each element, elt, it adds a DOM element to the page for that grocery item.
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?

After having found something, you could look up/down from it for something you want even more.
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.

Well, the template would be just typed into our HTML file, as static text. We then clone from it dynamically. We can take another look at the grocery example.
When would we use jQuery over cloning to build dynamic pages? It seems to me that cloning is more preferred since it scales.
Scale. I use cloning when the HTML gets "big" but if it's small, I usually just do things directly:
```
$("").text("hi").appendTo("body");
```
would add a greeting to the end of the page. No need for cloning.
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.

I meant duplicating the clone as a "distractor", because you're right, you don't clone the clone. A few people tripped up on that, unfortunately.
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.

Correct. We are cloning the HTML, not the clone.
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.

Alas, visualizations are hard over zoom, but tomorrow I'll draw some pictures.
Event delegation / event bubbling, event delegation. / I am still a little confused about attributes and delegation.

For sure; I'll talk about it some more.
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

If you need to change a specific element, you need to determine how it is different from all the other clones.
Id are not illegal, but I have found that students almost always get them wrong. They create N clones, all of which have the same ID, and then they can't figure out why $("#id") doesn't work.