Reputation: 35
I have 6 divs with a checkbox each. When I click the delete button the div with the checked checkbox should be deleted. However the deletion is working in an unpredictable way.Here is my jsfiddle. http://jsfiddle.net/mftckzaL/ . Please help!
<div class="0" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-
radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<div class="1" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-
radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<div class="2" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-
radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<div class="3" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-
radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<div class="4" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-
radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<div class="5" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-
radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<input type="button" value="Delete Selection" name="delete_banner_art" id="delete_banner_art"
class="delete_banner_art">
My JavaScript:
$("#delete_banner_art").click(function () {
checkboxes = document.getElementsByName('resolution');
for (var i = (checkboxes.length - 1); i >= 0; i--) {
if (checkboxes[i].checked == true) {
$("." + i).remove();
}
}
});
Upvotes: 0
Views: 139
Reputation: 25659
// this does not have to be resolved every time you click
var checkboxes = document.getElementsByName('resolution');
document.getElementById("delete_banner_art").onclick =function () {
for (var i=0, l=checkboxes.length; i<l; i++) {
// "condition" is equivalent to "condition == true"
if (checkboxes[i].checked) { checkboxes[i].parentNode.remove(); }
}
};
Upvotes: 0
Reputation: 21
See the fixed JSFiddle here: http://jsfiddle.net/mftckzaL/9/
HTML:
<div class="0 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution" />
</div>
<div class="1 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution" />
</div>
<div class="2 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution" />
</div>
<div class="3 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<div class="4 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<div class="5 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
<input type="checkbox" value="res1" name="resolution">
</div>
<input type="button" value="Delete Selection" name="delete_banner_art" id="delete_banner_art" class="delete_banner_art">
JS:
$("#delete_banner_art").click(function () {
$('.res1').children('input:checked').parent().remove();
});
A couple of things however,
Upvotes: 0
Reputation: 253416
If you're using jQuery, use jQuery, and employ its selectors, rather than mixing and matching (badly). To simplify your code (invalid HTML aside), I'd suggest:
$("#delete_banner_art").click(function () {
// we find the inputs of type="checkbox", that are checked:
$('input[type="checkbox"]:checked')
// find the closest ancestor 'div' element:
.closest('div')
// and remove those div elements:
.remove();
});
References:
Upvotes: 4
Reputation: 5745
The ids should be unique, also the for loop should go to i > 0
not i >= 0
http://jsfiddle.net/mftckzaL/2/
for (var i = (checkboxes.length - 1); i > 0; i--) {
if (checkboxes[i].checked == true) {
$("." + i).remove();
}
}
Here is a better way to delete the selected item
http://jsfiddle.net/mftckzaL/5/
$("#delete_banner_art").click(function () {
$('input[type="checkbox"]:checked').parents('div').remove();
});
Upvotes: 1
Reputation: 8885
here
for (var i = (checkboxes.length - 1); i >= 0; i--) {
if (checkboxes[i].checked == true) {
$("." + i).remove();
}
}
when you remove a div, you do not change the classes of the other ones, but the increment is updated to the current number of checkboxes.
you'll be able to remove them all starting from the end up, but it will seem unpredictable if you remove one in the list
Upvotes: 1