动态删除列表元素

Question

我计划为待办事项列表编写JavaScript代码，以将元素动态添加到无序列表以及每个元素的删除按钮。当用户单击“删除”按钮时，我想删除相应的列表元素。如何动态删除所述列表元素var button = document.querySelector("button");var input = document.querySelector("input");var ul = document.querySelector("ul");button.addEventListener("click",function(){    if((input.value.length)>0&&(input.value.includes("by")===true))    {        var li= document.createElement("li");        li.appendChild(document.createTextNode(input.value + " "));        ul.appendChild(li);        input.value="";        var nb= document.createElement("button");        nb.appendChild(document.createTextNode("REMOVE"));        li.appendChild(nb);    }    else if(input.value.includes("by")===false)    {        alert("Make Sure You Adhere to the Defined Format");    }});

Answer 1

您可以添加一个onclick处理程序，然后单击按钮获取parentNode并使用remove将其删除

var button = document.querySelector("button");

var input = document.querySelector("input");

var ul = document.querySelector("ul");

button.addEventListener("click", function() {

  if ((input.value.length) > 0 && (input.value.includes("by") === true)) {

    var li = document.createElement("li");

    li.appendChild(document.createTextNode(input.value + " "));

    ul.appendChild(li);

    input.value = "";

    var nb = document.createElement("button");

    //nb.classList.add('remove');

    nb.onclick = removeThis; // added onclick handler

    nb.appendChild(document.createTextNode("REMOVE"));

    li.appendChild(nb);

  } else if (input.value.includes("by") === false) {

    alert("Make Sure You Adhere to the Defined Format");

  }

});

function removeThis() {

  this.parentNode.remove();

}

<ul></ul>

<input type='text'><button type='button'>Add</button>