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

Question

我遇到了一个我无法理解的非常困扰的问题。

我有一个包含 2 个段落的 div 和一个用于删除第一个 p 元素的可单击按钮，但奇怪的是该按钮会自行删除它，而 [=12= 】元素继续活着！

这是我的代码的结果：

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

下面是我的代码：

<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 作为其名称（的回答中包含了这样做的原因）。试试这个：

<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>

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

A deleting button deletes itself instead of the targeted element

javascript

html

button

removechild