Sure. It's the difference between "Rafa defeated Novak" and "Rafa lost to Novak". Which one was the winner?

Here's the issue is which one is the parent. Suppose we have

    let parent = $("<ol>").attr("id", "Molly");
    let child = $("<li>").text("Ginny").appendTo(parent);
    // versus
    let parent = $("<ol>").attr("id", "Molly");
    let child = $("<li>").text("Ginny");
    parent.append(child);            

Both result in the same structure, with Ginny being a child of Molly, but the latter requires an extra line of code.

closest goes up the ancestor chain stopping at the first (nearest) ancestor that matches the argument. So, if we start at Ginny in the previous example, and we look up the chain, we should find Molly:

$(child).closest("ol");   // matches Molly
$(child).closest("div");  // won't match Molly, but might match something else
$(child).closest(".item"); // might match Molly, but if not, might match something else

When we delegate event handling to an ancestor, we can say what kind of descendant is doing the delegating. Here's an extreme example:

$("body").on("click", "button", () => { alert("you clicked a button") });
$("body").on("click", "li", () => { alert("you clicked a list item") });
$("body").on("click", "img", () => { alert("you clicked an image") });
$("body").on("click", ".important", () => { alert("you clicked something important") });

The second argument is the kind of descendant. The language is the language of CSS selectors, so I usually describe it as a descendant selector.

The "li" in the reading is an example of a descendant selector.

Great! We'll do that.