如何在没有唯一 ID 时删除特定容器

Question

我已经实现了一个 HTML 任务板。当用户按下“保存”按钮时，JS 代码会将用户任务添加到容器中。每个任务容器都有一个“删除”按钮，但是当按下它时 - 它会删除第一个容器子项。

代码：

“保存”按钮代码：

 var mission =

 {     

    text: document.getElementById('textarea').value,

    date: document.getElementById('date').value,

    time: document.getElementById('time').value

 };

 const rows = document.getElementById('rows');

 const cell = document.createElement('div');

 const id = document.createAttribute('id');

 id.value = "div-cell";

 cell.setAttributeNode(id);

 cell.innerHTML = '<button id="remove-button" type="button" class="btn btn-default" aria-label="Right Align" onClick="removeButton()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button><textarea></textarea><div><input><input></div>';

 rows.appendChild(cell);

 const [textarea, dateinput, timeinput] = cell.querySelectorAll('textarea, input'); 

 textarea.value = mission.text;

 dateinput.value = mission.date;

 timeinput.value = mission.time;

“删除”按钮代码：

function removeButton(){

  document.getElementById('rows').removeChild(document.getElementById('div-cell'));

}

我确实了解我的代码 - 查找第一个孩子并将其删除。有人可以告诉我如何移除被按下而不是第一个被按下的容器。

我想到了一个数组，但我不知道如何实现它。

感谢帮助者

Answer 1

您需要处理程序来获取对单击的按钮（或其容器）的引用，以便它可以删除容器 - 处理程序需要一个参数或者它需要检查事件。另一个问题是您使用的是内联处理程序，它有太多问题。改为使用 Javascript 附加侦听器，在处理程序内部，您将能够cell在外部范围内引用 ，并且.remove()它：button.onclick&nbsp;=&nbsp;()&nbsp;=>&nbsp;cell.remove();var mission = {&nbsp; text: 'text',&nbsp; date: 'date',&nbsp; time: 'time'};const rows = document.getElementById('rows');const cell = document.createElement('div');cell.innerHTML = '<button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-remove" aria-hidden="true">Remove</span></button><textarea></textarea><div><input><input></div>';rows.appendChild(cell);const [button, textarea, dateinput, timeinput] = cell.querySelectorAll('button, textarea, input');button.onclick = () => cell.remove();textarea.value = mission.text;dateinput.value = mission.date;timeinput.value = mission.time;<div id="rows"></div>请注意，文档中具有特定 ID 的元素不应超过一个。rows在这种情况下，无论如何都不需要容器以外的任何 id 。

Answer 2

我建议创建按钮，createElement以便您可以收听点击事件，并将其附加到容器，cell如下所示// The cell which contains the button itself is being passed as a parametercreateRemoveButton = (cell) => {&nbsp; &nbsp; const button = document.createElement('button');&nbsp; &nbsp; button.addEventListener('click', _ => {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('rows').removeChild(cell);&nbsp; &nbsp; });&nbsp; &nbsp; // Apply any styles needed...&nbsp; &nbsp; button.style.height = '20px';&nbsp; &nbsp; button.innerHTML = 'Remove';&nbsp; &nbsp; return button;}然后，当您创建div-cell元素时，只需将生成的按钮附加到click事件的回调中。// ...const rows = document.getElementById('rows');const cell = document.createElement('div');const id = document.createAttribute('id');id.value = 'div-cell';cell.setAttributeNode(id);const btn = createRemoveButton(cell);cell.innerHTML = '<textarea></textarea><div><input><input></div>';cell.appendChild(btn);rows.appendChild(cell);//...