This article provides information regarding the use of the remove() method in JavaScript and display: none property in CSS.
remove() – JavaScript
I am assuming you have an HTML page. Create div Element in the body tag, as shown below, I am passing this keyword (which means current Element).
|
1 |
<div onclick="removeItems(this);">Test</div> |
Inspect elements HTML view
Add script tag at the bottom of the body tag and write code as given below.
|
1 |
function removeItems(currentObject) { currentObject.remove(); } |
Now, when you click on div it will remove from DOM.
Output
In the remove() method the selected node is deleted from the DOM, and it is not available for the user to view that specified element Also deletes allocated space. Once remove a node from the DOM it is not accessible for any changes for DOM.
remove() method not accept any parameter.
display: none – CSS
Add head tag before body tag, then add a style tag to write css code. Create a div element in the body tag, as shown below piece of code.
|
1 2 |
<div class="displayNonePractice1">Test1</div> <div class="displayNonePractice2">Test2</div> |
Inspect elements HTML view
Add below piece of code of CSS into style tag.
|
1 2 |
.displayNonePractice1{ display:block } .displayNonePractice2{ display:none } |
when we apply the above CSS code on the div element, .displayNonePractice1 div is hidden from user view but still available for DOM.
Output
In the display: none property the selected HTML element hides from the user view, space will be removed but it is accessible for DOM.
The major difference is in the remove() method, the node removes from the DOM and deletes its space. But in the display: none property it will hide the element from the document, but it is available for DOM.
If you like this article, please share and comment.
