JavaScript 删除最近的元素答案

【问题标题】：JavaScript Delete Closest ElementJavaScript 删除最近的元素
【发布时间】：2020-09-03 07:47:35
【问题描述】：

我有一个功能可以让用户在单击时将元素添加到列表中。每个元素由一个 p 元素和一个删除按钮组成：

function addToDo() {

//Get input value of ToDo
var getToDoValue = document.getElementById("toDoInput").value;

var toDoTaks = document.getElementById("toDoTasks");

  //Create Element & set the value to userInput
  var createToDoElement = document.createElement("p");
  createToDoElement.classList.add("toDoElement");
  createToDoElement.innerHTML = getToDoValue;

  //Append to toDo
  toDoTaks.appendChild(createToDoElement);

  //Create Delete Button
  var deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Delete";
  toDoTaks.appendChild(deleteButton);
  deleteButton.classList.add("deleteToDo");

}

这很好用。但是，我想创建一个新函数，使用户能够单击调用“addToDo()”函数时创建的删除按钮之一，但我似乎无法让它工作。

我想删除点击的按钮和上面的 p 元素。这是我到目前为止得到的：

function myFunction() {

  var test = document.querySelectorAll(".deleteToDo");
  var test1 = document.querySelectorAll(".toDoElement")

  test[0].remove();
  test1[0].remove();

}

我知道我需要以另一种方式选择，并找到一种方式来选择当前单击的“删除”按钮。我还是新手，所以代码中有一些错误。

【问题讨论】：

从 DOM 中删除元素：获取父元素并通过将子元素的引用作为参数传递对其调用 removeChild 方法。 el.parentNode.removeChild(el);.
在创建的按钮 (deleteButton) 上添加 click 事件处理程序 (.addEventHandler()) 并使用 this（= 单击的按钮）作为删除它及其父级的参考。
但是如何在所有删除按钮上添加事件处理程序？

标签： javascript function

【解决方案1】：

您可以将 deleteButton 附加到 'ToDoElement'

function addToDo(){

  //Get input value of ToDo
  var getToDoValue = document.getElementById("toDoInput").value;
  var toDoTaks = document.getElementById("toDoTasks");
  
    //Create Element & set the value to userInput
    var createToDoElement = document.createElement("p");
    createToDoElement.classList.add("toDoElement");
    createToDoElement.innerHTML = getToDoValue;


  //Create Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.addEventListener('click',deleteITem,false)
    deleteButton.innerHTML = "Delete";
    deleteButton.classList.add("deleteToDo");


    createToDoElement.appendChild(deleteButton);
    //Append to toDo
    toDoTaks.appendChild(createToDoElement);
    
  
  } 
  
 
  function deleteITem(event){
    event.path[1].remove()
  }

【讨论】：

谢谢！这非常有效！你愿意简单解释一下“event.path[1].remove()”吗？
尝试使用console.log(event.path)查看结果它在数组中的事件返回路径也检查这个问题[stackoverflow.com/questions/26195091/…和[w3schools.com/JSREF/event_composedpath.asp]

【解决方案2】：

您可以使用代码删除段落。

var index = 0;
function addToDo() {
//Get input value of ToDo
  var getToDoValue = document.getElementById("toDoInput").value;

  var toDoTaks = document.getElementById("toDoTasks");

    //Create Element & set the value to userInput
    var createToDoElement = document.createElement("p");
    createToDoElement.id = 'p' + index;
    createToDoElement.classList.add("toDoElement");
    createToDoElement.innerHTML = getToDoValue;

    //Append to toDo
    toDoTaks.appendChild(createToDoElement);

    //Create Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.innerHTML = "Delete";
    deleteButton.id = 'btn' + index;
    deleteButton.onclick = function() { onClickRemove(this); };
    toDoTaks.appendChild(deleteButton);
    deleteButton.classList.add("deleteToDo");
    index += 1;
} 

    function onClickRemove(e) {
        var rowId    = e.id.replace('btn','');
         var row = document.getElementById('p'+rowId);
        //alert(rowId);
       if (row != null) {
            tblElement.remove(row);
       }
    }

【讨论】：