Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Remove (Delete) Multiple Divs with Same Id or Class Name

Mar 17, 2015
Introduction

Here I will explain how to use
jQuery to delete multiple divs with same id or jQuery remove or delete all divs with same class name or jQuery delete elements with class name. By using remove() property we can delete or remove multiple divs with sample class name.

Description:
  
In previous articles I explained jQuery remove specific element from array by value, jQuery add items into array with example,
jQuery zoom image on mouse over using zoom plugin, jQuery split string into array by comma and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to delete multiple divs with same id or same class name.

In webpage I created multiple divs with same id and trying to delete all the div tags with same id that time it will remove only one div element because as per rules only one html element should exists with particular id that’s the reason jQuery will think only one element exists and delete only first div tag with that id.

If you want to delete multiple divs with same tag we need to use class property whatever the divs you need to delete on button click give same class name for all the divs to delete at a time.  

By using remove() property we can delete multiple divs with same class name for that we need to write the code like as shown below


<script type="text/javascript">
$(function () {
$('#btnDelete').click(function () {
$('.delete').remove();
});
})
</script>

If you want to check it in complete example you need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery delete multile divs with single id</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnDelete').click(function () {
$('.delete').remove();
});
})
</script>
</head>
<body>
<div id="div1">
Test Div1
</div>
<div id="div2" class="delete">
Test Div2
</div>
<div id="div3" class="delete">
Test Div3
</div>
<div id="div4" class="delete">
Test Div4
</div>
<div id="div5" class="delete">
Test Div5
</div><br />
<input type="button" id="btnDelete" value="Delete Divs" />
</body>
</html>

Live Demo

For live demo try to click below button to delete all divs with class name “delete”  


Test Div1
Test Div2
Test Div3
Test Div4
Test Div5


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Unknown said...

Code is not working ....

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.