How to delete
element clicking on element in java script?

Question

I am still learning JS and have some small problem with deleting

element clicking on element in java script. Maybe somebody can help or give advice?

Here is my code:

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task").value;

  var li = document.createElement("li");
  ul.appendChild(li);
  li.innerText = input;

  var i = document.createElement("i");
  i.classList.add('fas', 'fa-times');
  //                i.className = 'fas fa-times';
  li.appendChild(i);

  input.value = "";
});


var remove = document.querySelectorAll(".fas");
remove.addEventListener("click", function() {

  for (var i = 0; i < remove.length; i++) {
    remove[i].classList.remove('remove-list');
  }
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <div class="wrapper">
    <div class="to-do-container">
      <div class="input-data">
        <input id="new-task" type="text">
        <button id="add-button" type="button">Add</button>
      </div>
      <ul id="tasks">
        <li class="remove-list">Zadzwonić do...<i id="fas" class="fas fa-times"></i></li>
        <li class="remove-list">Odebrać dzieci z...<i class="fas fa-times"></i></li>
        <li class="remove-list">Kupić na obiad...<i class="fas fa-times"></i></li>
        <li class="remove-list">Umówić się na...<i class="fas fa-times"></i></li>        
      </ul>
    </div>
  </div>
</body>

</html>

I have used loop as I think when I am using the querySelectorAll it is necessary to go through the loop. Thank you in advance for help.

You cannot add a listener to a `NodeList`. You can only add one to an actual element. On click, navigate to the parent element (to get to the `li`) and then use `.classList.remove`. — CertainPerformance, Sep 07 '18 at 06:05

Bhushan Kawadkar · Accepted Answer · 2018-09-07T07:20:15.963

you can write a function to remove parent li and call this function inside addEventLister which you need to attach while creating i

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task").value;

  var li = document.createElement("li");
  ul.appendChild(li);
  li.innerText = input;

  var i = document.createElement("i");
  i.classList.add('fas', 'fa-times');
  i.addEventListener("click", removeLi);
  //                i.className = 'fas fa-times';
  li.appendChild(i);

  input.value = "";
});

   var remove = document.getElementsByClassName("fas fa-times");
for (var i = 0; i < remove.length; i++) {
 remove[i].addEventListener('click',removeLi);
}

function removeLi() {
  this.parentElement.remove();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <div class="wrapper">
    <div class="to-do-container">
      <div class="input-data">
        <input id="new-task" type="text">
        <button id="add-button" type="button">Add</button>
      </div>
      <ul id="tasks">
        <li class="remove-list">Zadzwonić do...<i id="fas" class="fas fa-times"></i></li>
        <li class="remove-list">Odebrać dzieci z...<i class="fas fa-times"></i></li>
        <li class="remove-list">Kupić na obiad...<i class="fas fa-times"></i></li>
        <li class="remove-list">Umówić się na...<i class="fas fa-times"></i></li>        
      </ul>
    </div>
  </div>
</body>

</html>

Yes it works, but only on the element that is added. It is not working on the already added elements. Can you help again please? — blosiu, Sep 07 '18 at 07:14
for existing element, you can get all elements by className and add event listener in loop. see my updated post — Bhushan Kawadkar, Sep 07 '18 at 07:20
It works and I understand it so thats the most important for me. I only do not understand the "this" in function. What does it stands for? Could there be "li" instead? Can you explain in the meantime? — blosiu, Sep 07 '18 at 07:53
this stands for `i` who calls click event handler, by using this we calculate its parentElement — Bhushan Kawadkar, Sep 07 '18 at 08:00
When I exchange "this" for "i" it doesn't work. Should there always be "this"? I am just asking to understand this issue. — blosiu, Sep 07 '18 at 09:29
we are calling removeLi on click of each `i`, so when you call this function you don't know which `i` get clicked so `this` denote the clicked `i` as javascript object hance you can apply `parentElement` on it and get parent of clicked `i` only. See https://www.w3schools.com/js/js_this.asp for more information — Bhushan Kawadkar, Sep 07 '18 at 10:07

How to delete element clicking on element in java script?

1 Answers1

How to delete
element clicking on element in java script?