I am trying to delete the div when I click on it, yet I am unsure of how to go about this. Any help would be greatly appreciated.
HTML
<div onclick="fadeOut(this)"></div>
JavaScript
function fadeOut(i) {
????
}
-
1What are you trying to achieve FadeOut implies that you just want to make the div invisible but still in the HTML. Delete implies that you want to completely remove the div from the html document.user2417483– user24174832013-10-10 04:22:51 +00:00Commented Oct 10, 2013 at 4:22
Add a comment
|
4 Answers
Use:
function fadeOut(i) {
i.parentElement.removeChild(i);
}
Comments
You can use outerHTML its the inverse of innerHTML as in outerHTML pertains to only the element.
function fadeOut(i) {
i.outerHTML = ''; // deletes it from the DOM
}
And if you don't want to display it but keep it in the DOM
function fadeOut(i) {
i.style.display = 'none'; // hides the element
}
Comments
Even you can directly do this:(If this is specific to current div.)
<div onclick="this.parentNode.removeChild(this);">xyz</div>
Comments
Using jquery you can do it as follow.
Script:
function deletediv(id) {
$("#" + id).remove();
}
html:
<div id="testdiv" style="background-color:Red; height:100px; width:100px;" onclick="deletediv(this.id)"></div>
