A deleting button deletes itself instead of the targeted element

Question

I got a really bothering problem which I can not understand.

I have a div which contains 2 paragraphs, and a clickable button to delete the first p element, but the strange thing is that the button deletes it self and the p element continues to live!

This is the result of my code:

But when I click on the button I get this:

Below is my code:

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

Pointy · Accepted Answer · 2016-07-03T15:11:39.350

4

The function name "remove" is being hidden by the native "remove" method on the button element itself. If you change the name, it works as expected.

Event handlers established with HTML "onfoo" attributes execute in a specially-constructed scope that includes the methods (and other properties) on the DOM node for the element. That's just one of many reasons that it's preferable to use JavaScript to attach event handlers via addEventListener().

edited Jul 03 '16 at 15:11

answered Jul 03 '16 at 14:42

Pointy

405,095
59
585
614

@MattiVirkkunen yes, there is, and it's a very weird and surprising "feature". – Pointy Jul 03 '16 at 14:44

score 2 · Answer 2 · edited May 23 '17 at 10:28

2

All you need to do is to rename your function and avoid using remove as its name(The reason for this is included in @Pointy's answer). Try this:

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

edited May 23 '17 at 10:28

Community

1
1

answered Jul 03 '16 at 14:50

Vahid Farahmandian

6,081
7
42
62

Thanks @Vahid, please edit your answer by explaining why "remove" does not fit as a function's name in this case. – M.Taki_Eddine Jul 03 '16 at 16:30

A deleting button deletes itself instead of the targeted element

2 Answers2