Introduction
Hi All, How are you today? In this article we will see how we can remove a DOM element using JQuery. I hope you will like it.
Background
I know we all are working in the client side technologies, especially in JQuery. Sometimes we may need to write more client side codes rather than server side codes. In that case, you may need to remove some DOM elements pragmatically. Here I am going to give you a demo of how we can do this requirement.
Using the code
To start with, as you all know we need to load the JQuery reference.
[js]
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
[/js]
Once you load the reference you are ready to go.
Since this is a demo, we will explain with some steps. Sounds good?. So we will do the following tasks.
Shall we start then?
Add the elements to the DOM
We need to set our UI first right?
[html]
<body id="body">
Remove a DOM element from the UI using JQuery- Sibeesh Passion
<br/>
<br/>
<p id="addMe">Generate 10 Elements</p>
</body>
[/html]
Add CSS
[css]
<style>
p {
color: red;
width: 170px;
cursor: pointer;
border: 1px solid #ccc;
text-align: center;
}
#deleteMe {
color: white;
width: 170px;
cursor: pointer;
border: 1px solid #ccc;
text-align: center;
background-color: blue;
}
</style>
[/css]
So we have set our UI, and now if you run your page you can see output as follows.
Now we will add the needful scripts.
[js]
<script>
$(document).ready(function() {
$("#addMe").click(function() {
var html = ‘<table>’;
for (var i = 1; i <= 10; i++) {
html += "<tr><p>My Elements</p></tr>";
}
html += ‘</table>’;
$(‘#body’).append(html).append(‘<div id="deleteMe">Delete 5 Elements</div>’);
$("#addMe").hide();
});
$(document).on(‘click’, ‘#deleteMe’, function() {
for (var i = 1; i <= 5; i++) {
$(‘#body’).find(‘p’).get(i).remove();
}
$("#addMe").hide();
$("#deleteMe").hide();
});
});
</script>
[/js]
As you can see we are adding elements to the DOM with a loop. Once you run the page you can see the output as follows.
And once you click on “Delete 5 Elements” button, 5 DOM elements will be deleted.
The following code block describes how we can use .remove() function.
[js]
$(‘#body’).find(‘p’).get(i).remove();
[/js]
Complete Code
[html]
<html>
<head>
<title>emove a DOM element from the UI usign JQuery- Sibeesh Passion</title>
<style>
p {
color: red;
width: 170px;
cursor: pointer;
border: 1px solid #ccc;
text-align: center;
}
#deleteMe {
color: white;
width: 170px;
cursor: pointer;
border: 1px solid #ccc;
text-align: center;
background-color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body id="body">
Remove a DOM element from the UI using JQuery- Sibeesh Passion
<br/>
<br/>
<p id="addMe">Generate 10 Elements</p>
<script>
$(document).ready(function() {
$("#addMe").click(function() {
var html = ‘<table>’;
for (var i = 1; i <= 10; i++) {
html += "<tr><p>My Elements</p></tr>";
}
html += ‘</table>’;
$(‘#body’).append(html).append(‘<div id="deleteMe">Delete 5 Elements</div>’);
$("#addMe").hide();
});
$(document).on(‘click’, ‘#deleteMe’, function() {
for (var i = 1; i <= 5; i++) {
$(‘#body’).find(‘p’).get(i).remove();
}
$("#addMe").hide();
$("#deleteMe").hide();
});
});
</script>
</body>
</html>
[/html]
Conclusion
I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.
Thanks in advance. Happy coding!
Kindest Regards
Sibeesh Venu