单击动态创建的按钮时，如何删除动态创建的特定元素

我正在尝试制作一个待办事项列表。

当用户在文本框中输入后单击"添加"时，将在特定表中创建新行。

此行的第一列是用户输入，最后一列是为用户添加的每个输入动态创建的删除按钮。此按钮必须删除它所在的行才能成功工作。

我已经尽了最大努力找到解决方案，但我在这样做时遇到了麻烦。

感谢您的帮助。

参考代码：

function newTask() {
//retrieves task from input text box
var task = document.getElementById('taskInput').value;
//retrieves everything inside dropdown priority list
var priorityList = document.getElementById('priorityList');
//retrieves the index of selected option in dropdown priority list
var selectedPriorityIndex = priorityList.selectedIndex;
//retrieves text of selected option from dropdown priority list
var selectedPriority = priorityList.options[selectedPriorityIndex].text;
//create a new row
var Row = document.createElement("tr");
//adding task to row
var DataTask = document.createElement("td").appendChild(document.createTextNode(task));
Row.appendChild(DataTask);
//adding priority to row
var DataPriority = document.createElement("td").appendChild(document.createTextNode(selectedPriority));
Row.appendChild(DataPriority);
//adding checkbox to row
var checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkBox");
var DataCheckBox = document.createElement("td").appendChild(checkBox);
Row.appendChild(DataCheckBox);
//add remove button to delete the row
var removeButton = document.createElement("input");
removeButton.setAttribute("type", "button");
removeButton.setAttribute("value", "delete");


//This is the problem. Idk for sure
removeButton.onclick = function name(listRow) {
listRow.remove();
};


var DataDeleteButton = document.createElement("td").appendChild(removeButton);
listRow.appendChild(DataDeleteButton);
//adding entire row to the table
document.getElementById("listTable").appendChild(Row);
}

<!doctype html>
<html>
<head>
<title>
To-Do List Tracker
</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="main">
<form>
<input type="text" class="taskInput" id="taskInput" placeholder="Task">
<select id="priorityList" class="priorityList">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
<input type="button" class="addbtn" value="Add" onclick="newTask()">
</form>
<div class="listheader">
<h2>Task List</h1>
</div>
<table id="listTable">
</table>
</div>
</body>
</html>

你基本上就在那里。阻止代码工作的两个小问题。

本部分：

var DataDeleteButton = document.createElement("td").appendChild(removeButton);
listRow.appendChild(DataDeleteButton);

listRow是一个打字错误。您没有使用该名称设置任何变量。CCD_ 2为变量。这是固定的。

此外，删除按钮设置不正确。事件侦听器只有一个参数(event)。您可以使用event.target获取侦听器所在的元素，并使用event.target.closest('tr')获取周围的<tr>标签

removeButton.onclick = function name(e) {
e.target.closest('tr').remove();
};

虽然所有这些都使它发挥了作用，但还有一个最后的问题。您创建TD标签并尝试附加它们的方式不起作用。您不能定义变量并使用append内联扩展它。因此，对于每一个元素，我都这样改变了它，所以每个动作都是单独的

var DataDeleteButton = document.createElement("td");
DataDeleteButton.appendChild(removeButton);
Row.appendChild(DataDeleteButton);

function newTask() {
//retrieves task from input text box
var task = document.getElementById('taskInput').value;
//retrieves everything inside dropdown priority list
var priorityList = document.getElementById('priorityList');
//retrieves the index of selected option in dropdown priority list
var selectedPriorityIndex = priorityList.selectedIndex;
//retrieves text of selected option from dropdown priority list
var selectedPriority = priorityList.options[selectedPriorityIndex].text;
//create a new row
var Row = document.createElement("tr");
//adding task to row
var DataTask = document.createElement("td")
DataTask.appendChild(document.createTextNode(task));
Row.appendChild(DataTask);
//adding priority to row
var DataPriority = document.createElement("td");
DataPriority.appendChild(document.createTextNode(selectedPriority));
Row.appendChild(DataPriority);
//adding checkbox to row
var checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkBox");
var DataCheckBox = document.createElement("td");
DataCheckBox.appendChild(checkBox);
Row.appendChild(DataCheckBox);
//add remove button to delete the row
var removeButton =
document.createElement("input");
removeButton.setAttribute("type", "button");
removeButton.setAttribute("value", "delete");
//This is the problem. Idk for sure
removeButton.onclick = function name(e) {
e.target.closest('tr').remove();
};
var DataDeleteButton = document.createElement("td");
DataDeleteButton.appendChild(removeButton);
Row.appendChild(DataDeleteButton);
//adding entire row to the table
document.getElementById("listTable").appendChild(Row);
}

#listTable td {
padding: 5px;
margin: 0 2px 2px 0;
border: 1px solid #ccc;
}

<!doctype html>
<html>
<head>
<title>To-Do List Tracker</title>
</head>
<body>
<div class="main">
<form>
<input type="text" class="taskInput" id="taskInput" placeholder="Task">
<select id="priorityList" class="priorityList">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
<input type="button" class="addbtn" value="Add" onclick="newTask()">
</form>
<div class="listheader">
<h2>Task List</h1>
</div>
<table id="listTable">
</table>
</div>
</body>
</html>

尝试使用

removeButton.onclick = function name(listRow) {
listRow.path[1].remove()
};

我在这里所做的是console.log将输入记录到您的函数中，并找到进入我想要删除的元素的方法。一旦完成，工作就完成了。

此外，您的代码中还有另一个错误。

更改，

listRow.appendChild(DataDeleteButton);

至

Row.appendChild(DataDeleteButton);

希望一切顺利。

的基本问题

removeButton.onclick = function name(listRow) {
listRow.remove();
};

listRow是在参数列表中声明的，因此它与newTask函数中的listRow不同。它可以通过从参数列表中删除listRow来修复。(并一致地将事物命名为Row或listRow(。例如：

removeButton.onclick = function name() {
listRow.remove();
};

相关内容

最新更新

热门标签：