To do list with Javascript : can't delete item

Question

I made the remove item button with the js code while doing the to-do list project.

removing items which are earlier made in Code editor works well. *so in browser preview, I typed and added "new To-do" item to list.* but removing "new To-do" item doesn't work. even chrome Devtool shows no error. new item's tag and className is all correct.

p.s : don't need to worry about 'X' or X icon. I skipped for uploading.

[HTML]

<ul id="listUl">
    <li>Meet George <span class="remove"></span></li>
    <li>Pay Bills <span class="remove"></span></li>
    <li>new To-do <span class="remove"></span></li>
</ul>

[JS] - removing part.

var remove = document.getElementsByClassName('remove');

for (var i = 0; i < remove.length; i++) {
    remove[i].onclick = function() {
        var target = document.getElementById('listUl');
        target.removeChild(this.parentElement);
    }
}

score 3 · Answer 1 · answered Nov 05 '19 at 14:11

That's because every new item you add does not have any listener on them (remove[i].onclick = function(){...}). So when you click on them, nothing happens. You need to add the onClick listener to every new items, like you are doing for the initial ones.

Carsten Massmann · Answer 2 · 2019-11-05T18:13:47.750

I rewrote your code:

There is only one (delegated) event assigned now to the <ul> parent element, it will trigger only, when the click happens on an element with class="remove". In that case it is the <span> element which I also made a bit more visible by adding an "X" inside. Right, when the action occurs I have to go up two levels until I reach the parent of the actual element I want to remove: the <li> element.

var i=3,UL=document.querySelector('#listUl');
UL.addEventListener('click',function(ev){
  //   ev.target                       - this element was clicked on
  if (ev.target.classList.contains('remove'))
    // ev.target.parentNode            - this must be the <li> element
    // ev.target.parentNode.parentNode - and this is the <ul> element 
    ev.target.parentNode.parentNode.removeChild(ev.target.parentNode);
})
document.querySelector('#addTask').addEventListener('click',
function(){UL.innerHTML+='<li>and task no. '+(++i)+'... <span class="remove">X</span></li>'})

<button id="addTask">add another task</button>
<ul id="listUl">
<li>Meet George <span class="remove">X</span></li>
<li>Pay Bills <span class="remove">X</span></li>
<li>new To-do <span class="remove">X</span></li>
</ul>

The "add" button demonstrates how newly created<li>s also respond to clicks on the "remove"-span.

score 1 · Answer 3 · answered Nov 05 '19 at 15:07

1

Add the onClick listener to ul tag. Check

    if(e.target && e.target.nodeName == "LI") {
            //Your code here
    }

answered Nov 05 '19 at 15:07

Developer Tolulope

11
3

score 0 · Answer 4 · answered Nov 05 '19 at 14:11

It looks like that the JS code only adds delete function to these todos that already exists when the page loads. Newly added todos will not have onclick callback function attached if you only execute your js once when the pages loads.

The workaround here is to attach the callback function every time you create a TODO element.

The Alpha · Answer 5 · 2019-11-05T14:52:41.087

Your newly (dynamically) added DOM elements don't have event listeners attached to them, because on page load, you only iterated (looped) only currently available elements, so You may try the following approach (Read About Event Delegation):

document.getElementById('listUl').addEventListener('click', function(e) {
    if (e.target.nodeName == 'LI') {
     e.target.parentNode.removeChild(e.target);
    }
});

<ul id="listUl">
  <li>Meet George <span class="remove">X</span></li>
  <li>Pay Bills <span class="remove">X</span></li>
  <li>new To-do <span class="remove">X</span></li>
</ul>

score 0 · Answer 6 · answered Nov 05 '19 at 15:48

0

if you have jquery added to your page, you can do it like

$('#listUl').on('click', 'span.remove', function() {
  $(this).parent().remove();
});

$('.add').click(function() {
  $("#listUl").append("<li>Whatever Content <span class='remove'>x</span</li>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="listUl">
  <li>Meet George <span class="remove">x</span></li>
  <li>Pay Bills <span class="remove">x</span></li>
  <li>new To-do <span class="remove">x</span></li>
</ul>
<butoon class="add">Add</butoon>

answered Nov 05 '19 at 15:48

Ankit

660
4
17

really appreciate your comment. although i'm trying to do vanila JS first. i'll try jquery version later. Thank you. – MRM Nov 05 '19 at 15:53
In that case you can use The-Alpha's answer – Ankit Nov 05 '19 at 16:00

To do list with Javascript : can't delete item

6 Answers6