Adarsh Hegde
Adarsh Hegde

Reputation: 35

Deleting div elements using jquery remove() property seems to have random behavior

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

Answers (5)

blex
blex

Reputation: 25659

Pure JS

(not any longer)

// 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(); }
    }
};

JS Fiddle Demo

Upvotes: 0

aboyer1013
aboyer1013

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,

  1. In the HTML, I changed the repeated id attributes to classes. ID's by nature, are unique and having more than one on a page may cause problems in the future.
  2. I don't think classes can start with a number.

Upvotes: 0

David Thomas
David Thomas

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();
});

JS Fiddle demo.

References:

Upvotes: 4

Sam Battat
Sam Battat

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

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

Related Questions