Javascript 如何删除没有唯一ID的特定容器

我已经实现了一个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'));
}

我知道我的代码会查找第一个子元素并将其删除。有人能告诉我怎么做吗 拆下已按下的容器，而不是第一个容器

我考虑过数组，但不知道如何实现它

---

感谢帮助程序

您需要处理程序获取对已单击按钮（或其容器）的引用，以便它可以删除容器-处理程序需要一个参数，或者需要检查该事件

另一个问题是，您正在使用一个内联处理程序，这将导致。改为使用Javascript附加侦听器，在处理程序内部，您将能够引用外部作用域中的

单元格

，并

.remove（）

它：

button.onclick = () => cell.remove();

var任务={
文本：“文本”，
日期：'日期'，
时间：“时间”
};
const rows=document.getElementById（'rows'）；
const cell=document.createElement（'div'）；
cell.innerHTML='Remove'；
行。追加子（单元格）；
const[button，textarea，dateinput，timeinput]=cell.querySelectorAll（'button，textarea，input'）；
button.onclick=（）=>cell.remove（）；
textarea.value=mission.text；
dateinput.value=mission.date；
timeinput.value=任务时间
我建议使用
createElement
创建按钮，这样您就可以监听click事件，并将其附加到容器
单元格中

// The cell which contains the button itself is being passed as a parameter
createRemoveButton = (cell) => {
    const button = document.createElement('button');
    button.addEventListener('click', _ => {
        document.getElementById('rows').removeChild(cell);
    });
    // Apply any styles needed...
    button.style.height = '20px';
    button.innerHTML = 'Remove';
    return button;
}

然后，当您创建
div单元格
元素时，只需在
单击
事件上附加带有回调的生成按钮

// ...
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);
//...

/。。。
const rows=document.getElementById（'rows'）；
const cell=document.createElement（'div'）；
const id=document.createAttribute（'id'）；
id.value='div cell'；
cell.setAttributeNode（id）；
常量btn=createRemoveButton（单元格）；
cell.innerHTML=''；
附加子单元（btn）；
行。追加子（单元格）；
//...
不要使用重复的id，而是使用一个类。好的，但是如果所有的'div'元素都有相同的类，那么它们就不会有相同的id了？Ginius！我明白了！这就是我已经实现的：Cell。FixSt娃。AdvestTeListNER（‘点击’，函数（））{Real.ReaveCHIVER（Cell）；当回答解决了你的问题时，你可以考虑将它标记为接受（检查左边的复选框）以表明问题得到解决：