Les éléments de la liste de tâches JavaScript incluent désormais des boutons de suppression

Question

J'essaie d'ajouter un bouton de suppression à chaque élément de la liste. Les ajouter fonctionne tant que je n'ai pas de bouton Supprimer.

const newcontainer = document.getElementById("toDoContainers");

 //gets number of list items in todolist

 //adds list item to list

 function deleteitem(paramitem){

  var element = document.getElementById(paramitem);
  element.remove(paramitem);
 }

 function addnew(){
      let numb = document.getElementById("todolistitems").childElementCount;
      var listitem = document.createElement("li");
      var reallist = document.getElementById("todolistitems");
      var inputvar = document.getElementById("inputfield").value;
      var node = document.createTextNode(inputvar);
      let numbvar = numb +1;




      listitem.appendChild(node);
      listitem.setAttribute('id', numbvar);
      listitem.addEventListener('onClick', deleteitem(listitem));
      reallist.appendChild(listitem);  
      var inputvar = document.getElementById("inputfield").value="";
  //  node.appendChild(document.createTextNode(inputvar));
  /// document.getElementById("toDoContainers").innerHTML=inputvar;




 }

<h1>To Do List</h1>
<div class="container">
    <input id="inputfield" type="text"><button id="addToDo" onclick="addnew()">Add</button>
    <div class="tO" id="toDoContainers">
        <ul id="todolistitems">
        </ul>
    </div>
</div>

J'ai essayé une méthode où sur chaque élément de liste que vous créez, vous "onclick" = deleteitem(item). J'ai essayé d'utiliser queryselector, getelementbyId et queryselectorall dans la fonction de suppression.

L'ajout d'éléments de liste fonctionne tant que je n'essaie pas d'ajouter une fonctionnalité de suppression.

Answer 1

Il y a des erreurs dans votre code.

• Vous avez utilisé "onClick" au lieu de "click" dans l'événement click
• Votre affectation d'événement de clic exécute ou interprète en fait la fonction de suppression et essaie d'utiliser la valeur de retour de cette fonction comme fonction de clic.
• Vous transmettez également l'élément HTML de l'élément de liste au lieu de l'ID requis par la fonction. La fonction essaie ensuite de trouver l'élément en utilisant l'élément lui-même, puis supprime les éléments enfants avec le même argument - cela renverra toujours undéfini.

Vous devez l'envelopper dans une autre fonction qui renvoie une fonction à exécuter au clic et corriger l'erreur comme ceci :

  const newcontainer = document.getElementById("toDoContainers");

  //gets number of list items in todolist

  //adds list item to list

  function deleteitem(paramitem) {
    var element = document.getElementById("list" + paramitem);
    element.remove();
  }

  function addnew() {
    let numb = document.getElementById("todolistitems").childElementCount;
    var listitem = document.createElement("li");
    var reallist = document.getElementById("todolistitems");
    var inputvar = document.getElementById("inputfield").value;
    var node = document.createTextNode(inputvar);
    let numbvar = numb + 1;

    listitem.appendChild(node);
    listitem.setAttribute("id", "list" + numbvar);
    listitem.addEventListener("click", function () {
      deleteitem(numbvar);
    });
    reallist.appendChild(listitem);
    var inputvar = (document.getElementById("inputfield").value = "");
    //  node.appendChild(document.createTextNode(inputvar));
    /// document.getElementById("toDoContainers").innerHTML=inputvar;
  }

To Do List

    Add