How to add new created element in a NodeList?

Question

I am making a ToDo Application from HTML, CSS and JavaScript.

I have added a symbol in front of every list item, such that when clicked, it removes the list item.

The problem is when I try to remove pre-added list items, it works perfectly fine, but when I add a list item and then remove it, it doesn't work :(

Have a look at my code:

const toDoInput = document.querySelector("input");
const addButton = document.querySelector("button");
const listParent = document.querySelector("ul");
const removeLists = document.querySelectorAll(".remove-li");

const listItemMake = () => {
  if (toDoInput.value !== "") {
    const newDiv = document.createElement("div");
    newDiv.classList.add("list-item");
    const newListItem = document.createElement("li");
    newListItem.append(toDoInput.value);
    newDiv.append(newListItem);
    toDoInput.value = "";
    const newSpan = document.createElement("span");
    newSpan.classList.add("remove-li");
    newSpan.innerHTML = '(Remove Button)';
    newDiv.append(newSpan);
    listParent.append(newDiv);
  }
};

addButton.addEventListener("click", () => {
  listItemMake();
});

toDoInput.addEventListener("keydown", (event) => {
  if (event.code === "Enter") {
    listItemMake();
  }
});

for (const removeList of removeLists) {
  removeList.addEventListener("click", () => {
    removeList.parentElement.remove();
  })
}

<h1>ToDo Application</h1>
<div class="container">
  <div class="form-container">
    <input type="text" placeholder="Add New Tasks">
    <button>Add</button>
  </div>
  <div class="list-container">
    <ul>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
    </ul>
  </div>
</div>

While I was trying to fix this issue by myself in Chrome Dev Tools, I realised that my newly created list-item do contain the remove-list button, but the remove-list button is never added in the remove-lists list. My whole fuction to remove list items is based on remove-list and hence it doesn't work. Although, I don't know how to add that element in the list.

Also, I don't really know the name of the list I'm declaring on the first 4 lines. What exactly is toDoInput (declaring on line 1)? I don't think it's an array because though I can iterate over it, I can't really use methods like push & pop. What exactly is the term, and what is the difference?

Help Appreciated :)

Answer 1

You need to listen for click event on newly added element. hence added a click listener on newSpan element after adding it into DOM.

You are listening for event for removeLists element only but when you add a new element in the DOM, the newly doesn't have the click event. Hence, we have to listen for the event explicitly.

I hope, it answers your question. :)

const toDoInput = document.querySelector("input");
const addButton = document.querySelector("button");
const listParent = document.querySelector("ul");
const removeLists = document.querySelectorAll(".remove-li");

const listItemMake = () => {
  if (toDoInput.value !== "") {
    const newDiv = document.createElement("div");
    newDiv.classList.add("list-item");
    const newListItem = document.createElement("li");
    newListItem.append(toDoInput.value);
    newDiv.append(newListItem);
    toDoInput.value = "";
    const newSpan = document.createElement("span");
    newSpan.classList.add("remove-li");
    newSpan.innerHTML = '(Remove Button)';
    newDiv.append(newSpan);
    listParent.append(newDiv);
    newSpan.addEventListener("click", () => {
      newSpan.parentElement.remove();
    });
  }
};

addButton.addEventListener("click", () => {
  listItemMake();
});

toDoInput.addEventListener("keydown", (event) => {
  if (event.code === "Enter") {
    listItemMake();
  }
});

for (const removeList of removeLists) {
  removeList.addEventListener("click", () => {
    removeList.parentElement.remove();
  })
}

<h1>ToDo Application</h1>
<div class="container">
  <div class="form-container">
    <input type="text" placeholder="Add New Tasks">
    <button>Add</button>
  </div>
  <div class="list-container">
    <ul>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
    </ul>
  </div>
</div>

Answer 2

Please change some code. Please add remove event function to listItemMake() function.

const toDoInput = document.querySelector("input");
const addButton = document.querySelector("button");
const listParent = document.querySelector("ul");

const listItemMake = () => {
  if (toDoInput.value !== "") {
    const newDiv = document.createElement("div");
    newDiv.classList.add("list-item");
    const newListItem = document.createElement("li");
    newListItem.append(toDoInput.value);
    newDiv.append(newListItem);
    toDoInput.value = "";
    const newSpan = document.createElement("span");
    newSpan.classList.add("remove-li");
    newSpan.innerHTML = '(Remove Button)';
    newDiv.append(newSpan);
    listParent.append(newDiv);
  }
  addRemoveEvent();
};

addButton.addEventListener("click", () => {
  listItemMake();
});

toDoInput.addEventListener("keydown", (event) => {
  if (event.code === "Enter") {
    listItemMake();
  }
});

function addRemoveEvent() {
  const removeLists = document.querySelectorAll(".remove-li");
  for (const removeList of removeLists) {
    removeList.addEventListener("click", () => {
      removeList.parentElement.remove();
    })
  }
}

addRemoveEvent();

<h1>ToDo Application</h1>
<div class="container">
  <div class="form-container">
    <input type="text" placeholder="Add New Tasks">
    <button>Add</button>
  </div>
  <div class="list-container">
    <ul>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
    </ul>
  </div>
</div>