CODEWITHSUNDEEP
javascriptdomcode-injectionqueryselector
jam Mal
jam Mal

Reputation: 1

how to connect javascript to elements added after the html code is updated?

I am following the Dom javascript net ninja series, and I am stuck because after I inject an 'li' element the delete function doesn't work anymore. I had a similar problem at first, the querySelector() method didn't work, but it was solved using setTimeout(), can u help, please?

Here is the HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" />
    <script src="cont.js"></script>
    <title>Testing JavaScript</title>
  </head>

  <body>
    <div class="wrapper">
      <header>
        <div id="page-banner">
          <h1 class="title">My Contacts</h1>
          <p>Special List</p>
          <form id="search">
            <input type="text" placeholder="Search Contacts..." />
          </form>
        </div>
      </header>

      <div id="Contact-List">
        <h2 class="title">Contacts</h2>
        <ul>
          <li>
            <span class="contat">Zineb Zrhari</span>
            <span class="delete">delete</span>
          </li>
          <li>
            <span class="contat">Kawter Lebouni</span>
            <span class="delete">delete</span>
          </li>
          <li>
            <span class="contat">Oumayma Touji</span>
            <span class="delete">delete</span>
          </li>
          <li>
            <span class="contat">Rim Essahel</span>
            <span class="delete">delete</span>
          </li>
        </ul>
      </div>
      <form id="add">
        <input type="text" placeholder="Add a Contact..." />
        <button>Add</button>
      </form>
    </div>
  </body>
</html>

And the javascript code:

window.setTimeout(() => {
  const list = document.querySelector("#Contact-List ul");

  // delete books
  list.addEventListener("click", function (e) {
    if (e.target.className == "delete") {
      const li = e.target.parentElement;
      li.parentNode.removeChild(li);
    }
  });

  // add book
  const addForm = document.forms["add"];
  addForm.addEventListener("submit", function (e) {
    e.preventDefault();
    const value = addForm.querySelector("input[type='text']").value;

    // create elements
    const li = document.createElement("li");
    const contact = document.createElement("span");
    const deleteBtn = document.createElement("span");

    // add contant
    deleteBtn.textContent = "delete";
    deleteBtn.classList.add("delete");
    contact.textContent = value;
    deleteBtn.classList.add("name");

    // append to document
    li.appendChild(contact);
    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
});

Thank you!

Upvotes: 0

Views: 103

Answers (1)

drnugent
drnugent

Reputation: 1545

Thank you for posting your complete code.

The issue is with this line of your JavaScript:

if(e.target.className == 'delete'){

This will work if delete is the only class applied to an element. However, you are applying two classes to the new element, which means e.target.className becomes delete name.

You can fix it by changing the line to:

if(e.target.classList.includes('delete')) {

This will work even if the element has multiple classes.

Upvotes: 1

Related Questions