使用ID并不理想。
当你有多个元素，你也想做同样的事情，它通常是更好地使用所谓的委托事件。
它的工作原理是将click处理程序添加到父元素.items上，然后检查目标是否是.remove之后的元素，然后可以找到此元素的父元素.item并删除。
这种方法的一个好处是，如果您稍后动态添加项，事件也将对它们起作用。另外请注意，在下面的示例中，我使用了closest，parentElement的优点是，如果您稍后更改布局，它将继续工作。
下面是一个简单的例子。

document.querySelector('.items')
  .addEventListener('click', e => {
     if(e.target.classList.contains('remove')) {
       e.target.closest('.item').remove();
     }
  });

个字符

JavaScript中的所有DOM元素都有.parentElement属性。这意味着在button.onClick函数中，你可以简单地说：button.parentElement.remove();因此只删除父节点。

事件侦听器接收事件作为第一个参数。该事件具有currentTarget属性，该属性指向事件处理程序所附加的元素（在本例中为button）。
对于该元素，可以使用parentElement：

function removeParent(event) {
  event.currentTarget.parentElement.remove();
}

document.querySelector('#btn1').onclick = removeParent
document.querySelector('#btn2').onclick = removeParent

个字符
注意：你不应该使用on...属性来附加事件，而应该使用addEventListener：

function removeParent(event) {
  event.currentTarget.parentElement.remove();
}

document.querySelector('#btn1').addEventListener('click', removeParent)
document.querySelector('#btn2').addEventListener('click', removeParent)

<div>
<button id="btn1"></button>
</div>

<div>
<button id="btn2"></button>
<div>

的字符串
使用on...属性，您只能将特定事件的一个事件处理程序附加到元素，当您意外地覆盖了元素上仍然存在的事件处理程序时，这可能会在较大的代码库中导致难以调试的问题。

首先，我们来检验一下你的理论

for (let item of document.getElementById("foo").querySelectorAll("input")) item.addEventListener("click", function() {
    this.parentNode.remove();
});

个字符
正如我们所看到的，一个事件被附加到给定id的元素中的第一个input，它的父元素将被删除。这就引出了一个非常重要的问题：

重复的id在HTML中是无效的，应尽可能避免

因此，将button-submit和div-list id转换为类并执行以下操作：

for (let button of document.getElementsByClassName("button-submit")) {
    button.addEventListener("click", function() {
        button.parentNode.remove();
    });
}

型
我暂时忽略了将按钮添加到div中，因为您没有提供有关结构的上下文信息。

不应该有多个html标签具有相同的id（如here所述）。你可以使用这个：

let button = document.getElementById('button-submit');

button.onclick = button.parentElement.remove;

字符串
如果你想把函数分配给多个按钮，考虑使用类名而不是id。移除的元素仍将仅是单击按钮的父元素。
请注意，有不止一种方法可以实现你想要的，每种方法都有优点和缺点，正如其他现有的答案所示。