javascript - remove element

Question

My question is rather elementary, but I do not understand why, in the following code, on button click only button dissapears, instead of 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 that is called instead of your remove function. And also the string thing.

<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. Firstly, intro should be a string, not an identifier, so use remove('intro') in your onclick.

Second, document.rwmoveChild is incorrect. removeChild should be called on the parent of the element you are removing. It is common to use:

element.parentNode.removeChild(element);

Answer 3

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

Also, you must rename your function, for example, removeById instead of remove. Then it works perfectly.

The function remove actually does something completely different. (Your function is not even invoked when it is named remove as you can see by putting an alert message into 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')">