Кнопка удаления удаляет себя вместо целевого элемента

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» is bei ng, скрытый встроенным методом «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>