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

Question

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

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

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

我已尽力找到解决方案，但我遇到了麻烦。

感谢任何帮助。

参考代码：

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>

Answer 1

尝试使用

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

我在这里所做的是 console.logged 输入您的函数并找出进入我想删除的元素的方法。一旦完成，工作就完成了。

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

改变，

listRow.appendChild(DataDeleteButton);

到

Row.appendChild(DataDeleteButton);

希望一切都好。

Answer 2

你基本上在那里。 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>

Answer 3

基本问题：

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

listRow 是在参数列表中声明的，所以它与 newTask 函数中的 listRow 不是一回事。它可以通过从参数列表中删除 listRow 来修复。（并始终将事物命名为 Row 或 listRow）。例如：

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

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

How to remove a particular element created dynamically when a dynamically created button is clicked?

javascript

onclick

dom-events