Add and remove community directory cards

Finish the community directory by adding members through a labelled form and removing old or new cards. The starter is the completed selection-and-search step, with a form and Remove buttons in its HTML; those new controls have no handlers yet. The seed-swap demo showed the event flow using different elements.

Create DOM nodes for submitted data. Put untrusted names and skills into textContent, not innerHTML. Listen for removals on the stable #members parent, not just its initial buttons. Re-run the existing filter after any addition or removal so the count and empty state remain truthful. Filtering already clears details when it hides the selected card; removing a selected card must also clear its stale detail view. The existing View handler will also work for new cards because it listens on the same parent.

Here is a smaller example from a different project: a reading log can create a title safely and hear a Remove click from a button added later.

const entry = document.createElement("li");
const title = document.createElement("span");
title.textContent = document.querySelector("#book-title").value;
entry.append(title);
const remove = document.createElement("button");
remove.type = "button";
remove.className = "remove-book";
remove.textContent = "Remove";
entry.append(remove);
document.querySelector("#reading-log").append(entry);

document.querySelector("#reading-log").addEventListener("click", (event) => {
  if (event.target.matches("button.remove-book")) {
    event.target.closest("li").remove();
  }
});

Your directory needs this safe creation and parent-listener pattern plus buttons, selection details, form feedback, and the existing search. If a selected card disappears, clear its details rather than describing someone who is no longer there.

The starter already includes the labelled form and original Remove buttons. Its delegated View listener also works on newly created cards; leave those in place while you build the add and remove flow.