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>

动态删除列表元素

1 个答案: