In this post, we will learn how to remove elements form DOM in jQuery. So how we can do this, we will learn in this post.


How To Remove Elements From DOM In jQuery ?


Remove Elements From DOM

To remove elements form DOM, we use  remove()  jQuery method. This method helps us to remove elements in HTML document. If you want to remove specific element from document then use  id  attribute. So how this method works we will see in the given example.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Remove Elements From DOM In jQuery ?</title>
</head>
<body>

<h1>CodexRadar</h1>

<p id="par1">This is an example text 1.</p>

<p>This is an example text 2.</p>


<button type="button" id="removeAll">Remove All Element</button>

<button type="button" id="removeSpecific">Remove Specific Element</button>


<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<script>

$(document).ready(function(){

//This will remove all p element
$("#removeAll").click(function(){
$("p").remove();
});


//This will remove spedific p element width id par1
$("#removeSpecific").click(function(){
$("p#par1").remove();
});

});

</script>
</body>
</html> code-box



Summary

In this post we learned how to remove elements form DOM in jQuery. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.   

Post a Comment

Previous Post Next Post