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