Help Trying to delete the element list todo on the fly

Help Trying to delete the element list todo on the fly
0

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
}

You have the following code in the createOurItems function, but there is no event object unless something is clicked.

  if (event.target.id === 'remove') {
    todoContainer.removeChild(event.target.parentNode);
  }

You already seem to know how to add an event listener to an element (i.e. the element with id=“add”), so you will need to do something similar within createOurItems for the button with class=“remove”. Instead of assigning “remove” to the id attribute for the button, you will want a unique value (id attribute values should be unique already), in case you want to reference it later. Each remove button will use the same event listener callback function that you will need to created.

Make sure once you delete the item that you also remove the applicable even listener.

See if you can implement what I have described in your pen. If you get stuck, ask more questions.

Hello @RandellDawson
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.

In your createOurItems function you have a for loop which iterates through all existing elements which have a remove class and add event listeners to them (even if they already have one). You only should add a single event listener when the new item is created. This is causing unexpected results (removing extra items).

@imendieta I will give you a few hints to help you out here.

You do not need to iterate through the myRemove elements. You only need to add the click event to the last element. Then inside the callback function of the event listener, you need to remove the parent’s parent of the element that is clicked.

@RandellDawson
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

@imendieta Your for loop does only add a single event listener to the last item added, but you can do that without the for loop.

// delete item funtion
var myRemove = document.getElementsByClassName("remove");
var myBtnRemove = myRemove[myRemove.length - 1];
myBtnRemove.addEventListener("click", function() {
  todoContainer.removeChild(this.parentNode.parentNode);
});
document.getElementById("item").value = "";

The line:

var myBtnRemove = myRemove[myRemove.length - 1];

could also be written as:

var myBtnRemove = myRemove.slice(-1)[0];

Remember, you still need to remove the event listener when the item is removed, to recover the system resources being used when the event listener is added.

Hi @RandellDawson

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.

1 Like

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

1 Like

@RandellDawson

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.