Javascript - delete an item

Question

My question is pretty elementary, but I don’t understand why in the following code the button “button only” disappears, and not the whole div:

<script> function remove(id) { //get the element node element = document.getElementById(id); //remove the element from the document document.removeChild(element); } </script> <div id="intro" class="jumbotron"> <h1>Your Offline Web Dictionary!</h1> <p class="lead"> <div class="controls"> <input class="span7 " type="text" placeholder=" " name="key"> </div> <div> <button class="btn btn-large btn-success" onclick="remove(intro)"> Dictionary Search </button> </div> </div> 

Jsfiddle

Answer 1

The problem is that the button element has a remove property, so it is called instead of the delete function. And also a string.

 <button class="btn btn-large btn-success" onclick="window.remove('intro');console.log(this.remove);"> Search </button> 

http://jsfiddle.net/HMEVd/76/

Answer 2

Two problems. First, intro should be a string, not an identifier, so use remove('intro') in your onclick.

Secondly, document.rwmoveChild is incorrect. removeChild should be called on the parent of the element you are removing. Commonly used:

 element.parentNode.removeChild(element); 

Answer 3

intro should be sent to the function as a string, not a variable, i.e. 'intro'

In addition, you should rename your function, for example removeById instead of remove . Then it works great.

The remove function actually does something completely different. (Your function is not even called when it is called remove , as you can see by putting a warning message in it.)

 function removeById(id) { //get the element node element = document.getElementById(id); //remove the element from the document document.removeChild(element); } ... <button class="btn btn-large btn-success" onclick="removeById('intro')">