Introduction
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 are all working in the client side technologies, especially in JQuery. Sometimes, we may need to write more client side code rather than server side code. 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 meet this requirement.
Using the Code
To start with, as you all know, we need to load the JQuery reference.
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
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.
- Add the elements to the DOM
- Delete the DOM elements using
.remove(), .get() functions
Shall we start then?
Add the Elements to the DOM
We need to set our UI first, right?
<body id="body">
Remove a DOM element from the UI using JQuery- Sibeesh Passion
<br/>
<br/>
<p id="addMe">Generate 10 Elements</p>
</body>
Add 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>
So we have set our UI, and now if you run your page, you can see output as follows:
Now we will add the needed scripts.
<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>
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.
$('#body').find('p').get(i).remove();
Complete Code
<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>
Conclusion
I hope you liked this article. Please share your valuable thoughts and comments. Your feedback is always welcome.
Thanks in advance. Happy coding!
