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

【问题标题】：How to remove a particular element created dynamically when a dynamically created button is clicked?单击动态创建的按钮时，如何删除动态创建的特定元素？
【发布时间】：2021-06-10 06:34:37
【问题描述】：

我正在尝试列出待办事项。

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

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

我已尽我所能找到解决方案，但我在这样做时遇到了麻烦。

感谢任何帮助。

参考代码：

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>

【问题讨论】：

标签： javascript onclick dom-events

【解决方案1】：

你基本上在那里。导致代码无法正常工作的 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 内联扩展它。所以对于每个元素，我都是这样改的，所以每个动作都是独立的

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 () { Row.remove(); }; 似乎也可以。
谢谢！我无法表达我的喜悦，我的多巴胺水平超出了屋顶哈哈。这有效！
@Coder123 - 没问题。我发现了其他一些东西并将其添加到我的答案中。 'td' 标签尚未创建，但现在已修复，我解释了原因
感谢您提供宝贵的信息。我做了建议的更改:)

【解决方案2】：

尝试使用

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

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

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

改变，

listRow.appendChild(DataDeleteButton);

到

Row.appendChild(DataDeleteButton);

希望一切都好。

【讨论】：

【解决方案3】：

基本问题：

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

是 listRow 是在参数列表中声明的，所以它与 newTask 函数中的 listRow 不同。只需从参数列表中删除 listRow 即可修复它。（并一致地命名事物 Row 或 listRow）。例如：

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

【讨论】：