Say, you want to remove any elements from an existing HTML document. And this is where the Dele methods in JQuery comes into picture.
Let us understand it with the below example, where we have a <p> element,
<p> New Code </p>
With content New Code. And we want to delete it completely from the HTML element.
And this can be achieved with the remove() method.
The remove() method is used to delete a content of an HTML element along with its child elements.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<p>New Code</p>
<button> Click to delete </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button').click( function() {
$('p').remove();
});
</script>
</body>
</html>
So, in the above code, we have to delete the <p> element completely.
<p>New Code</p>
And we have done it using the JQuery statement,
$('button').click( function() {
$('p').remove();
});So, on button click, the remove() function is called,
$('p').remove();And the content of <p> element is removed.
Similarly, there are other Remove methods that helps us delete the contents of the HTML elements.
They are listed below :
The empty() method is used to delete the child elements from an HTML element.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<div class = "outerClass" style = "background-color : violet; height : 130px">
Inside outer div class
<div class = "innerClass" style = "background-color : orange; height: 100px">
Inside inner div class
<p style = "background-color : green">
New Code
</p>
</div>
</div>
<button> Click to delete </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button').click( function() {
$('.outerClass').empty();
});
</script>
</body>
</html>
So, in the above code, we have two <div> elements and a <p> element,
<div class = "outerClass" style = "background-color : violet; height : 130px"> Inside outer div class <div class = "innerClass" style = "background-color : orange; height: 100px"> Inside inner div class <p style = "background-color : green"> New Code </p> </div> </div>
And the DOM structure for the above <div>'s and <p> element is,
So, if we look at the DOM structure, there is a parent <div> with class name outerClass. And inside it there are two elements, a text element (i.e. Inside outer div class) and another <div> with class name innerClass.
And the inner <div> with class name innerClass has two elements, a text element (i.e. Inside inner div class) and another <p> element with text New Code.
We have put style = "background-color : violet; height : 130px" in the outer <div>,
<div class = "outerClass" style = "background-color : violet; height : 130px">
To represent a violet box.
Now, if you look at the JQuery statement,
$('button').click( function() {
$('.outerClass').empty();
});We have called the empty() method on the outer <div> with class name outerClass,
$('.outerClass').empty();And if you see the output, on click all the children of outer <div> gets deleted.
But the important thing to note is the outer <div> itself doesn't get deleted,
<div class = "outerClass" style = "background-color : violet; height : 130px">
And how do you understand that?
Just take a look at the violet box. Everything is deleted but the violet box is left. The violet box is the <div> with class = "outerClass".
And that is because the empty() method deletes the children of the selected element but doesn't delete the element itself.
Now let us take the same example using remove() method.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<div class = "outerClass" style = "background-color : violet; height : 130px">
Inside outer div class
<div class = "innerClass" style = "background-color : orange; height: 100px">
Inside inner div class
<p style = "background-color : green">
New Code
</p>
</div>
</div>
<button> Click to delete </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button').click( function() {
$('.outerClass').remove();
});
</script>
</body>
</html>
Now, if you see the output, the elements along with the violet box got removed. That is because the remove() method deletes the actual element along with its child element.
This method is used to delete the element and its child elements from an HTML element.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<div class = "outerClass" style = "background-color : violet; height : 130px">
Inside outer div class
<div class = "innerClass" style = "background-color : orange; height: 100px">
Inside inner div class
<p style = "background-color : green">
New Code
</p>
</div>
</div>
<button> Click to delete </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button').click( function() {
$('.outerClass').detach();
});
</script>
</body>
</html>
Now, if you see the output, even here the elements along with the violet box got removed.
That is because the detach() method deletes the actual element along with its child element.
The removeProp() method is used to remove a property from an HTML element that is added by the prop() method.
<html>
<head>
<title> My First Programme </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
</head>
<body>
<h1> JQuery </h1>
<p></p>
<button class = "addBtn"> Click to add Property </button>
<button class = "removeBtn"> Click to remove Property </button>
<script>
$('button.addBtn').click( function() {
$('p').prop("background-color", "violet");
$("p").text("The background-color property is added and is : " + $("p").prop("background-color"));
});
$('button.removeBtn').click( function() {
$('p').removeProp("background-color");
$("p").text("The background-color property is removed and is : " + $("p").prop("background-color"));
});
</script>
</body>
</html>
So, in the above code, we have two <button> elements,
<button class = "addBtn"> Click to add Property </button> <button class = "removeBtn"> Click to remove Property </button>
On click of the <button> with class name addBtn,
<button class = "addBtn"> Click to add Property </button>
The below JQuery statement is executed,
$('button.addBtn').click( function() {
$('p').prop("background-color", "violet");
$("p").text("The background-color property is added and is : " + $("p").prop("background-color"));
});So, we have used the prop() method to set the background-color property to violet,
$('p').prop("background-color", "violet");And on the next button click,
<button class = "removeBtn"> Click to remove Property </button>
The below JQuery statement is executed,
$('button.removeBtn').click( function() {
$('p').removeProp("background-color");
$("p").text("The background-color property is removed and is : " + $("p").prop("background-color"));
});And we have used the removeProp() method to remove the property background-color added using the prop().
$('p').removeProp("background-color");The removeAttr() method is used to remove an attribute from an HTML element.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<p style = "color: red">New Code</p>
<button class = "removeBtn"> Click to remove Property </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button.removeBtn').click( function() {
$('p').removeAttr("style");
});
</script>
</body>
</html>
So, in the above code, we have a <p> element,
<p style = "color: red">New Code</p>
And in the <p> element, there is an attribute named style that is setting the color of the element to red(i.e. style = "color: red").
And on button click, the below JQuery statement gets triggered,
$('button.removeBtn').click( function() {
$('p').removeAttr("style");
});And there is the removeAttr() method, that removes the style attribute from the <p> element.
$('p').removeAttr("style");And if you see the output, on button click, the color of the <p> element,
New Code
Changes from red to black.