First To-do-list with querySelectorAll

Question

I have some problems with querySelectorAll. Script is working only with querySelector, but it deletes only first li. When I try to replace querySelector with querySelectorAll to make all delete buttons work there is error - "deleteButton.addEventListener is not a function".

html:

body>
 <div id="buttons">
  <input type="text" placeholder="twoje zadanie...">
  <button type="submit" class="add">dodaj</button> 
 </div>
 <div id="tasks">
    <ul>
       <li><button class="done">done</button>
       asd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       asdd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       dsad
       <button class="delete">x</button></li>
    </ul>
 </div>
<script src="script.js"></script>
</body>

js:

   var deleteButton = document.querySelectorAll('.delete');

   deleteButton.addEventListener('click', function() {
      var li = document.querySelector('li');
      li.classList.add('li-delete');
});

because querySelectorAll returns a list - so you can't attach an event to a list, you have to take an item from the list and attach the event to that. If you want to add the same event to all of them, loop through the list — ADyson, Apr 24 '18 at 14:46

Muhammad Usman · Accepted Answer · 2018-04-24T14:54:16.330

Reason: Coz querySelectorAll get you the list of matching nodes. And there is no .addEve.. property that you can use on list.

Moreover, document.querySelector('.delete'); will get you the first button and will only add listener to the this button but you don't want.

If you want to add listeners to all of the elements you should loop through the list and add a listener on all of the matched elements. Like

var el = document.querySelectorAll('.delete');

for(var i=0; i<el.length; i++){
  el[i].addEventListener('click', function(){
    console.log("clicked");
      var li = this.parentNode;
      li.classList.add('li-delete');
  })
}

.li-delete{
   color : red;
}

<div id="tasks">
    <ul>
       <li><button class="done">done</button>
       asd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       asdd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       dsad
       <button class="delete">x</button></li>
    </ul>
 </div>

score 0 · Answer 2 · answered Apr 24 '18 at 14:50

addEventListener on NodeList

You have to iterate through each node and attach the event listener if you want to use .querySelectorAll to select your elements.

It looks like you might be new to working with the DOM in JavaScript. If that's the case, I'd recommend taking a look at jQuery. It's not a lightweight library, but it makes many of these things much easier.

score 0 · Answer 3 · answered Apr 24 '18 at 14:51

2 Problens in your code.

First querySelectorAll will return an array of all the elements that match the query. I added a console.log(deleteButtons), so you can see what thequerySelectorAll`` is generating. You will need a loop to add the event listener to each of the elements in the array.

Second, you can use this to get the button that trigger the event and then go get their parent <li> using the js .parentNode

Hope this helps :)

var deleteButton = document.querySelectorAll('.delete');
console.log(deleteButton);
for(let i=0; i<deleteButton.length;i++){
   deleteButton[i].addEventListener('click', function() {
      var li = this.parentNode;
      li.classList.add('li-delete');
    })
};

.li-delete {display:none;}

<div id="buttons">
  <input type="text" placeholder="twoje zadanie...">
  <button type="submit" class="add">dodaj</button> 
 </div>
 <div id="tasks">
    <ul>
       <li><button class="done">done</button>
       asd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       asdd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       dsad
       <button class="delete">x</button></li>
    </ul>
 </div>
<script src="script.js"></script>

Ur welcome. Dont forget to upvote when you get enough rep :) — Gerardo BLANCO, Apr 24 '18 at 15:26

First To-do-list with querySelectorAll

3 Answers3