Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript DOM Scripting By Example Editing and Filtering Names States of the Application

The remove button, stopped working all of a sudden. Can´t seem to understand why?

It worked previously, but not now.

const form = document.getElementById("registrar");
const input = form.querySelector("input");
const ul = document.getElementById("invitedList");


function createLI(text){
  const li = document.createElement("li");
  li.textContent = text;

  const label = document.createElement("label");
  label.textContent = "ok";

  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";

  label.appendChild(checkbox);
  li.appendChild(label);

  //EDIT

  const editButton = document.createElement("button");
  editButton.textContent = "edit";
  li.appendChild(editButton);

  // REMOVE
  const Removebutton = document.createElement("button");
  Removebutton.textContent = "remove";
  li.appendChild(Removebutton);
  return li;
}


form.addEventListener("submit", (e) => {
e.preventDefault();

const text = input.value;
input.value = "";


 const li = createLI(text);
   ul.appendChild(li);
});

ul.addEventListener('change', (e) => {

  const checkbox = event.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;


  if(checked) {
  listItem.className = "responded";
  }
  else {
  listItem.className = "";
  }

  });

ul.addEventListener("click", (e) => {

  if (e.target.tagName === "BUTTON") {
  if (e.target.text === "remove") {
    const li = e.target.parentNode;
    const ul = li.parentNode;
    ul.removeChild(li);
}
     else if (e.target.textContent === "edit") {
     console.log("editing");
     }

}});

1 Answer

Here you are checking text instead of textContent

if (e.target.text === "remove") {

Make that change and functionality should be restored