单击动态创建的按钮时如何删除动态创建的特定元素？
[英]How to remove a particular element created dynamically when a dynamically created button is clicked?
问题描述
我正在尝试制作待办事项清单。
当用户在文本框中输入后单击添加时，会在特定表中创建一个新行。
该行将用户输入作为第一列，在最后一列中，有一个为用户添加的每个输入动态创建的删除按钮。 此按钮必须删除它所在的行才能成功工作。
我已尽我所能找到解决方案，但我在这样做时遇到了麻烦。
任何帮助表示赞赏。
参考代码：
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>
3 个解决方案
解决方案1
0 2021-06-10 06:48:18
尝试使用
removeButton.onclick = function name(listRow) {
listRow.path[1].remove()
};
我在这里所做的是控制台。将输入记录到您的 function 并找出进入我想要删除的元素的方法。 一旦完成，工作就完成了。
此外，您的代码中还有另一个错误。
改变，
listRow.appendChild(DataDeleteButton);
至
Row.appendChild(DataDeleteButton);
希望一切安好。
解决方案2
0 已采纳 2021-06-10 06:51:19
你基本上在那里。 阻止代码工作的 2 个小问题。
在这部分：
var DataDeleteButton = document.createElement("td").appendChild(removeButton);
listRow.appendChild(DataDeleteButton);
listRow是一个错字。 您没有使用该名称设置任何变量。 Row是变量。 这是固定的。
此外，删除按钮设置不正确。 事件侦听器只有一个参数(event) 。 您可以使用event.target获取侦听器所在的元素，并且可以使用event.target.closest('tr')获取周围的<tr>标记
removeButton.onclick = function name(e) {
e.target.closest('tr').remove();
};
尽管所有这些都使它正常工作，但还有最后一个问题。 您创建 TD 标签并尝试 append 的方式不起作用。 您不能定义变量并将其扩展为与 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>
解决方案3
0 2021-06-10 07:01:07
基本问题：
removeButton.onclick = function name(listRow) {
listRow.remove();
};
是在参数列表中声明了listRow，因此它与newTask function中的listRow不同。 只需从参数列表中删除 listRow 即可修复它。 （并一致地命名事物 Row 或 listRow）。 例如：
removeButton.onclick = function name() {
listRow.remove();
};
onclick不适用于动态创建的按钮..在这种情况下如何解决呢？
[英]onclick not working for dynamically created button .. how to solve this in this particular case?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.