单击动态创建的按钮时如何删除动态创建的特定元素？
[英]How to remove a particular element created dynamically when a dynamically created button is clicked?
问题描述
I am trying to make a to-do list.
我正在尝试制作待办事项清单。
When a user clicks add after giving input in the text box, a new row is created in a particular table.当用户在文本框中输入后单击添加时，会在特定表中创建一个新行。
This row has the user input as the first column and in the last column, there is a remove button that is dynamically created for every input added by the user.该行将用户输入作为第一列，在最后一列中，有一个为用户添加的每个输入动态创建的删除按钮。 This button must remove the row it is residing in, to work successfully.此按钮必须删除它所在的行才能成功工作。
I have tried my best to find the solution but I am having trouble doing so.我已尽我所能找到解决方案，但我在这样做时遇到了麻烦。
Any help is appreciated.任何帮助表示赞赏。
Reference code:参考代码：
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
Try using尝试使用
removeButton.onclick = function name(listRow) {
listRow.path[1].remove()
};
What I did here is I console.logged the input to your function and find out the way to get into the element that I wanted to remove.我在这里所做的是控制台。将输入记录到您的 function 并找出进入我想要删除的元素的方法。 Once that's done, work is finished.一旦完成，工作就完成了。
Also, there's another error in your code as well.此外，您的代码中还有另一个错误。
Change,改变，
listRow.appendChild(DataDeleteButton);
To至
Row.appendChild(DataDeleteButton);
Hope all is well.希望一切安好。
解决方案2
0 已采纳 2021-06-10 06:51:19
You were basically there.你基本上在那里。 2 little issues that were preventing the code from working.阻止代码工作的 2 个小问题。
In this part:在这部分：
var DataDeleteButton = document.createElement("td").appendChild(removeButton);
listRow.appendChild(DataDeleteButton);
listRow is a typo. listRow是一个错字。 You had not set up any variable by that name.您没有使用该名称设置任何变量。 Row was the variable. Row是变量。 That's fixed here.这是固定的。
Also, the delete button was not set up right.此外，删除按钮设置不正确。 Event listeners have a single argument (event) .事件侦听器只有一个参数(event) 。 You can get the element that the listener is on with event.target and you can get the surrounding <tr> tag with event.target.closest('tr')您可以使用event.target获取侦听器所在的元素，并且可以使用event.target.closest('tr')获取周围的<tr>标记
removeButton.onclick = function name(e) {
e.target.closest('tr').remove();
};
While all that got it working, there was one final issue.尽管所有这些都使它正常工作，但还有最后一个问题。 The way you were creating TD tags and trying to append them didn't work.您创建 TD 标签并尝试 append 的方式不起作用。 You cant define the variable and extend it inline with append.您不能定义变量并将其扩展为与 append 内联。 So for each of the elements, I changed it like this, so each action was separate所以对于每一个元素，我都是这样改变的，所以每个动作都是分开的
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
The basic issue with:基本问题：
removeButton.onclick = function name(listRow) {
listRow.remove();
};
is that listRow is declared in the argument list, so it's not the same thing as listRow from the newTask function.是在参数列表中声明了listRow，因此它与newTask function中的listRow不同。 It can be fixed just by removing listRow from the argument list.只需从参数列表中删除 listRow 即可修复它。 (And consistently naming the thing Row or listRow). （并一致地命名事物 Row 或 listRow）。 eg:例如：
removeButton.onclick = function name() {
listRow.remove();
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.