Hello Readers,
In this blog we define the difference between .empty(), .remove() and .detach() methods in jQuery:
.empty(), .remove() and .detach() all are jquery methods and all are used for removing elements from DOM but they all are different method in jquery.
- .empty() : empty() method removes all the child elements and content of the matched or selected elements.
empty() method does not accept any arguent.
Syntax :
$(selector).empty()
For Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<div style="height:100px;background-color:yellow">
This is some text
<p>This is a paragraph inside the div.</p>
</div>
<p>This is a paragraph outside the div.</p>
<button>Remove content of the div element</button>
</body>
</html>
In the above code, we use div, p(paragraph) and button. When we click the button its remove the content of the div element and its child nodes also.
Another Example:
Below is the HTML:
<div class="content">
<div class="hai">Hello</div>
<div class="goodevening">good evening</div>
</div>
Now use the empty() method:
$("div.hai").empty()
The above code result in a DOM structure with the Hello text deleted.
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>
- .remove():
remove() method remove the element itself and everything inside it. In addition to this remove() method remove all bound events and jquery data associated with the elements.
Syntax :
$(selector).remove(selector)
Parameter :
selector : its a optional parameter which is used one or more elements to be removedin jquery.
For Example:
Below is the given HTML:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
Now use the remove() method
$( ".hello" ).remove();
this result in a DOM structure with the
element deleted:
<div class="container">
<div class="goodbye">Goodbye</div>
</div>
If we use the selector as an optional parameter then :
$( "div" ).remove( ".hello" );
This would result in the same DOM structure:
<div class="container">
<div class="goodbye">Goodbye</div>
</div>
Another Example : Removes all paragraphs from the DOM
<html>
<head>
<title>remove demo</title>
<style>
p {
background: yellow;
margin: 6px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button> remove on paragraphs</button>
<script>
$( "button" ).click(function() {
$( "p" ).remove();
});
</script>
</body>
</html>
The above code remove all p (paragrapbh) tag and its element inside it.
- .detach() :
detach() is work as a same as remove() method but it keeps all jquery data belongs with the removed elements.
Syntax :
$(selector).detach()
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Remove all p elements</button>
</body>
</html>
In the above code, remove all the selected elements.
0 Comment(s)