2

The text "Now I'm here..." is supposed to disappear when the button is clicked, not the button itself.

<div id="alpha">Now I'm here...</div>
<button type="button" onclick="remove()">Remove</button>
<script>
    function remove()
    {
        var element = document.getElementById("alpha");
        element.parentNode.removeChild(element);
    }

    /*function add()
    {
        var ele = document.createElement("p");
        var text = document.createTextNode("This is new text");
        ele.appendChild(text);

        var location = document.getElementById("alpha");
        location.appendChild(ele);
    }*/
</script>
Celeritas
  • 14,489
  • 36
  • 113
  • 194
  • 1
    possible duplicate of [How to clear the content of a div using javascript?](http://stackoverflow.com/questions/3450593/how-to-clear-the-content-of-a-div-using-javascript) – عثمان غني Apr 08 '14 at 03:56
  • 2
    It's a good question @Celeritas. I made you a fiddle: http://jsfiddle.net/5x84v/ – dgp Apr 08 '14 at 03:58
  • If you go here http://jsfiddle.net/5x84v/1/, it seems that the remove function isn't being called at all. Try renaming to "deleteRow" or something similar and seeing if that helps – FamiliarPie Apr 08 '14 at 04:02
  • just set wrap in head in fiddle and it works http://jsfiddle.net/5x84v/4/ – Vinay Pratap Singh Bhadauria Apr 08 '14 at 04:03
  • Yet another example why inline event handlers are generally bad practice. https://stackoverflow.com/questions/6941483/onclick-vs-event-handler/21975639#21975639. – Felix Kling Apr 08 '14 at 04:26

4 Answers4

4

There is another function called remove that is interfering with your function.

Rename your function and it works fine:

http://jsfiddle.net/fL3gZ/

<div id="alpha">Now I'm here...</div>
<button type="button" onclick="Myremove()">Remove</button>
<script>
    function Myremove()
    {
        var element = document.getElementById("alpha");
        element.parentNode.removeChild(element);
    }
</script>
Steve Wellens
  • 20,506
  • 2
  • 28
  • 69
  • I thought the same @Steve Wellens. If you have a second, could you take a look at: http://jsfiddle.net/8x3A3/ . I am confused why that solution does not work. Any thoughts? – dgp Apr 08 '14 at 04:08
  • How did you catch that? – Celeritas Apr 08 '14 at 04:11
  • @dgp If you move the code from the JavaScript section to the HTML section and wrap it in ` – JW Lim Apr 08 '14 at 04:12
  • 1
    @JWLim: No, it's the way inline event handlers work: https://stackoverflow.com/questions/6941483/onclick-vs-event-handler/21975639#21975639 – Felix Kling Apr 08 '14 at 04:26
  • @Celeritas - I put an alert in the function. When it wasn't called, I knew something afoul was afoot. – Steve Wellens Apr 08 '14 at 15:50
4

What's happening is remove() is being called on the button itself! HTMLElement.prototype.remove is an existing function (in some browsers)! Oh god!

var button = document.getElementsByTagName("button")[0];

// surprise! this is what's actually happening
button.remove();

Check out this alternative approach. See: fiddle

Change HTML to

<div id="alpha">Now I'm here...</div>
<button type="button">Remove</button>

Then use this JavaScript

function remove(id) {
  var elem = document.getElementById(id);
  if (elem) elem.parentNode.removeChild(elem);
}

var button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function(event) {
  remove("alpha");
  event.preventDefault();
});

A couple things about this:

  • I'm favoring a more unobtrusive approach
  • The remove function is single purpose, and reusable
  • It will work in more browsers
  • You won't run into WTFs like you just experienced
Mulan
  • 129,518
  • 31
  • 228
  • 259
0

remove() is already an excisting javascript method, so you are actually calling that method on your button instead of calling the function.

Just rename the function and it will be fine.

Fiddle: http://jsfiddle.net/WkUqT/7/

function removeText()
{
    var element = document.getElementById("alpha");
    element.parentNode.removeChild(element);

}
Bigalow
  • 325
  • 2
  • 14
0

You are probably using chrome as your browser to test that code. Elements in chrome have a self-removal, .remove() method which removes the element itself from its container.

This is the main reason why the code above removes the button, because of this the appended event in your onclick() declaration was not invoked because the element invoking the event does not exist anymore. Try changing the name of your function to removeElement().

ryeballar
  • 29,658
  • 10
  • 65
  • 74