Explain jQuery code

What this jQuery sample shows

selectors

$("#products li") takes a CSS selector and returns every matching element, wrapped so jQuery methods work on all of them at once. $(function () { ... }) waits for the page to be ready before running. :visible is jQuery's own addition: document.querySelectorAll(":visible") threw ':visible' is not a valid selector.

events

.on("input", ...) runs on every keystroke in the search box, and inside the handler this is the element the handler runs for, here the search box. .on("click", ".remove", ...) is a delegated handler: it sits on the list and runs for any .remove button inside it, with this set to that button, so a Remove button added after the page loaded worked too.

traversal

.find(".name") looks down inside each item, and .closest("li") walks up from the clicked button to the item it belongs to. .filter(":visible") keeps the items still showing, which is how the count line reads 2 shown after typing blue.

effects

.toggle(true) shows an item and .toggle(false) hides it. .fadeOut(200, ...) fades the item over 200 ms and then runs the function, so the item was still in the list straight after the click and gone 400 ms later, once .remove() had run.

Good to know

• Run with jQuery 4.0.0 in Chromium on a list of three products: typing blue left Blue mug and Blue plate with 2 shown, clearing the box brought back all three, and Remove on Red mug faded it out and took it off the list.
• The same Remove handler bound straight to the buttons with $(".remove").on("click", ...) removed an original item but did nothing on a button added later, because that button didn't exist when the handler was bound.
• $items is a common naming habit, not syntax: the $ at the start reminds you the variable holds a jQuery object, not a plain element.

Watch out: $items is looked up once, when the page loads. A product added later isn't in it, so typing blue hid nothing new: an added Green bowl stayed on screen while the count still said 2 shown. Looking the items up inside the input handler with $("#products li") fixed both.