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 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”
|
|
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 Email
|
|||
1 comments :
Code is not working ....
Note: Only a member of this blog may post a comment.