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

Musa · Accepted Answer · 2013-06-08 22:32:22Z

4

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/

answered Jun 8, 2013 at 22:32

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JosephConrad Over a year ago

+1 Yes, it is pretty good explanation. Thanks a lot!! I will accept it within few minutes.

T.J. Crowder Over a year ago

Why would the button's remove get called? Is there some implicit with in action? And where is this remove coming from? It's not a specified DOM method.

Musa Over a year ago

Well I saw this behaviour a while back and never really questioned it.

T.J. Crowder Over a year ago

This certainly seems to be correct (look in the console): jsfiddle.net/HMEVd/78

T.J. Crowder Over a year ago

Yet another example of why using DOM0 handlers is a Bad Idea(tm). (And the implicit with on the element in the onclick generated function is coming back to me...)

Niet the Dark Absol · Accepted Answer · 2013-06-08 22:28:36Z

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

answered Jun 8, 2013 at 22:28

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

T.J. Crowder Over a year ago

All quite correct, but it doesn't answer the question the OP asked: Why is the button, not the div, disappearing?

Joseph Myers · Accepted Answer · 2013-06-08 22:35:07Z

1

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')">

edited Jun 8, 2013 at 22:35

answered Jun 8, 2013 at 22:24

Joseph Myers

6,56229 silver badges36 bronze badges

1 Comment

T.J. Crowder Over a year ago

This doesn't explain the symptom the OP quoted: "on button click only button dissapears, instead of the whole div"

Collectives™ on Stack Overflow

javascript - remove element

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related