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
?
You have to call removeChild
:
function removeDivFunction() {
MyDiv.parentNode.removeChild(MyDiv);
}
<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();
});
});
function removeDivFunction() {
$(".MyDiv").remove();
}
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.
<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);
}
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 = "";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.