Help Trying to delete the element list todo on the fly

Hello friends,

Trying to do a todo list in pure vanilla js. when i add the items, i manage to add the item with two additional styles the trash button and the check mark, but im having trouble trying to delete that particular item with a separate function. i know i have to do something like this, not sure how to integrate it.? if any help will be provided… i will appreciate it.

Here is the link for code pen:

function removeItem( itemid ) {
  var element = document.getElementById(itemid ); 
  element.parentNode.removeChild(element); // will remove the element from DOM
}

Hello @camperextraordinaire
i have look at your feedback and read it carefully, although i was trying to do something similar as what you asked for but in another way, please let me know until were im doing ok. i have modify the id of the button called id="remove-items" also i have made the item to be delete but its not working as spected, it does but does weird things.

  // delete item funtion
  var myRemove = document.getElementsByClassName('remove');
  for( var i = 0; i < myRemove.length; i++ ){
    var elRemove = myRemove[i];
      elRemove.addEventListener('click', function(){
        todoContainer.removeChild(todoContainer.lastElementChild);

      });
  }

if you click on the first trash icon will all be deleted, but if you click on second or third will do the trick… not sure what im doing there
here is the code pen updated.

@camperextraordinaire
i manage to do it as you wanted, although my only question is why no iterate since its a class and many items will have to be remove from the item, why this ? so i manage to make it worked ! :slight_smile: Another question will be its there is another way of removing parents as an alternative.

this is my code:

 // delete item funtion
  var myRemove = document.getElementsByClassName('remove');

    for( var i = 0; i < myRemove.length; i++ ){
      var myBtnRemove = myRemove[i];
    }

      myBtnRemove.addEventListener('click', function(){

        var item = this.parentNode.parentNode;
        var parent = item.parentNode;
        parent.removeChild(item);

      });

codepen update it

Hi @camperextraordinaire

Here is the removeEventListener that i forgot to add, can you let me know if its valid the way im approaching to it, it looks that its working as i follow the link you provided. Just one question, do i have is this will be done every time we fire an eventListener ?

I created a nested removeItem() on our createOurItems function.

// delete item function
  var myRemove = document.getElementsByClassName('remove');

    for( var i = 0; i < myRemove.length; i++ ){
      var myBtnRemove = myRemove[i];
    }

      // myBtnRemove.addEventListener('click', function(){
      //
      //   var item = this.parentNode.parentNode;
      //   var parent = item.parentNode;
      //   parent.removeChild(item);
      //
      // });

      myBtnRemove.addEventListener('click', removeItem);

      document.getElementById('item').value = "";

      function removeItem(){

        var item = this.parentNode.parentNode;
        var parent = item.parentNode;
        parent.removeChild(item);

        myBtnRemove.removeEventListener("click", removeItem);

      };

    };

Here is the codepen update:

You only need to remove an event listener if the element it was associated with is no longer needed in the DOM. In this case, once you remove the item, you do not need the click event listener anymore for the trashcan button.

2 Likes

Ok i understood, So did i got the approach we were looking for @camperextraordinaire ?

1 Like

@camperextraordinaire

Thank you so much for making me learn more, by thinking and finding a solution to the problem, this make me work happy in my coding skills :slight_smile:

I learn a lot from you.

A different (better?) way to do this is to use Javascript’s bubbling to attach a single eventlistener on the parent element. You don’t need to clean up with the removing of individual eventlisteners with this method. Each button click (and it’s event/data/etc) will bubble up to the parent element. The following is some sample code. The cartWrapper is the parent element and contains a ul with li’s each having their own delete button). The only stipulation here is we need to make sure a button is clicked and get that event, not the parent element’s click. This is in es5, but can easily be converted to es6 and work the same:

var cartWrapper = document.querySelector('.cart-card')

cartWrapper.addEventListener('click', function(e) {
  var isButton = e.target.nodeName === 'BUTTON'
  if (!isButton){
    return
  }
})