How to remove the content from a "div" element using a button "onclick" function?

Question

I have a div element that contains a number of images. When the user clicks a button, I want the contents of the div to be removed (not the div itself, I want to reuse the div to potentially add new content).

In my HTML, the div and button are defined as:

<body>
    ...
    <div class="MyDiv"></div>
    ...
    <button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
    ...
</body>

How do I write a function that removes all elements from this div?

possible duplicate of [Remove element by id](http://stackoverflow.com/questions/3387427/remove-element-by-id) — David, May 15 '15 at 13:07
http://red-team-design.com/removing-an-element-with-plain-javascript-remove-method/ — Nagaraj S, May 15 '15 at 13:12
To the author: I edited both title and content of your question so that it becomes more immediately apparent what you are looking for. Remember that the more clearly you state your question, the more chance you have that someone will go through the trouble of answering it. Also, if your question was answered correctly, *please* remember to 'approve' the correct answer. This rewards the author of that answer and makes it easier for future visitors to see what the correct answer was. — David van Driessche, May 17 '15 at 15:56

score 0 · Answer 1 · answered May 15 '15 at 13:11

0

You have to call removeChild:

function removeDivFunction() {
   MyDiv.parentNode.removeChild(MyDiv);
}

answered May 15 '15 at 13:11

Jivings

22,834
6
60
101

score 0 · Answer 2 · answered May 15 '15 at 13:11

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Remove div element</button>


$(document).ready(function(){
    $("button").click(function(){
        $("#div1").remove();
    });
});

user3419778 · Answer 3 · 2015-05-15T13:28:31.670

0

function removeDivFunction() {
    $(".MyDiv").remove();
}

edited May 15 '15 at 13:28

answered May 15 '15 at 13:15

user3419778

856
3
8
11

score 0 · Answer 4 · answered May 15 '15 at 13:15

David has already pointed you to an existing question/solution.
For reference consider reading: http://www.w3schools.com/js/js_htmldom_nodes.asp
Its always a good idea to assign id to the div.

Also if you are using jQuery you can delete element by $("#divid").remove() for reference see: https://api.jquery.com/remove/

I hope this helps.

score 0 · Answer 5 · answered May 15 '15 at 13:29

<div class="MyDiv">I need to remove</div>
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>  
function removeDivFunction() {
    var element = document.getElementsByClassName("MyDiv")[0];
    element.parentNode.removeChild(element);
}

DEMO

score 0 · Answer 6 · answered May 15 '15 at 13:45

You can try Html

<div id="some">Example</div>
<button onclick="myFunction()">Click me</button>

javascript

function myFunction() {
    var child = document.getElementById("some");
    child.parentNode.removeChild(child);
}

And if you want to erase content of DIV then use

  child.innerHTML = "";

How to remove the content from a "div" element using a button "onclick" function?

6 Answers6