删除按钮删除自身而不是目标元素

Question

我有一个非常困扰的问题，我无法理解。

我有一个div，其中包含2个段落，还有一个可点击的按钮，用于删除第一个p元素，但奇怪的是该按钮将自行删除，p元素继续活着！

这是我的代码的结果：

但是当我点击按钮时，我得到了这个：

以下是我的代码：

<div>
  <p id="id_1">The first paragraph.</p>
  <p id="id_2">The second one.</p>
</div><br>
<button onclick="remove(document.getElementById('id_1'));">click me!</button>
<script>
  function remove(elem)
    {
      var parent=elem.parentNode;
      parent.removeChild(elem);
    }

</script>

Answer 1

函数名“remove”被按钮元素本身的原生“remove”方法隐藏。如果更改名称，则按预期工作。

使用HTML“onfoo”属性建立的事件处理程序在特殊构造的范围内执行，该范围包括元素的DOM节点上的方法（和其他属性）。这只是众多原因之一，最好使用JavaScript通过addEventListener()附加事件处理程序。

Answer 2

您需要做的就是重命名您的功能并避免使用remove作为其名称（其原因包含在@Pointy的答案中）。试试这个：

<div>
  <p id="id_1">The first paragraph.</p>
  <p id="id_2">The second one.</p>
</div><br>
<button onclick="removeElement(document.getElementById('id_1'));">click me!    </button>
<script>
  function removeElement(elem)
{
  var parent=elem.parentNode;
  parent.removeChild(elem);
}

</script>