Search and remove of particular class if they exist after the parent
In the following case, when the <span> class=add is clicked, how can I
check and remove any <div>s with the class edit, flag,delete ~ and many
more, if they appear after the parent <div>.
These <div> need to be cleared if they exist, so a fresh <div> can be
added there. I'm familiar with remove(), but I'm stuck with finding
multiple <div> with the above classes and the parent part.
It is unlikely that all will ever be there, I've hard-coded them for this
example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script type="text/javascript"
src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".add").click(function() {
// Find and remove all div's with classes flag, edit, delete, that
may appear after the </div>
// containing the <span> that was clicked
});
});
</script>
</head>
<body>
<div id="container">
<div class="h1" data-id="1">Teachers <span class="add"
data-id="US01">Add New</span></div>
<div class="flag">Flag</div>
<div class="edit">Edit</div>
<div class="h2" data-id="2">Who is your favorite Math teacher? <span
class="add" data-id="US02">Add New</span></div>
<div class="flag">Flag</div>
<div class="edit">Edit</div>
<br>
<div class="h1" data-id="8">Restaurants <span class="add"
data-id="US10">Add New</span></div>
<div class="flag">Flag</div>
<div class="edit">Edit</div>
<div class="h2" data-id="9">Which is your favourtie restaurant in
town? <span class="add" data-id="US20">Add New</span></div>
<div class="flag">Flag</div>
<div class="edit">Edit</div>
</div>
</body>
</html>
No comments:
Post a Comment