JavaScript删除最近的元素

如何解决JavaScript删除最近的元素

我有一个功能，允许用户在单击时将元素添加到列表中。每个元素都包含一个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();

}

我知道我需要以其他方式进行选择，并找到一种选择当前喜欢的“删除”按钮的方式。我仍然很新，所以代码中有一些错误。

解决方法

您可以将deleteButton附加到'ToDoElement'

git reset --hard

,

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

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);
       }
    }