jQuery remove issue with IE6

Question

I know, I know, IE6 is the devil but I have no choice but to work with it on this project. When I try to remove a parent div it works in every browser except IE (hasn't been checked in other versions yet). Any idea why? - just added some html

$('a#remove-product'+i).click(function(event){
    $(this).parent('.product').remove();
    i--;
});




    <div class="product" id="product1">
        <h2>Product 1</h2>
        <div class="info-line">
        <label>Division</label>
        <p><select id="selection-1">
          <option value="">- Select a Division -</option>
          <option value="abrasives">Abrasives</option>
          <option value="tapes">Bonding, Surface Protection &amp; Tapes</option>
          <option value="packaging">Packaging</option>
        </select></p>
        <a id="remove-product1" href="#add-product" class="remove">Remove Product</a></div>
    </div>

Answer 1

When are you running this code? IE shouldn't have any particular issue with this unless it's not in a document.ready, in which case you need to wrap it like this:

$(function() {
  $('a#remove-product'+i).click(function(event){
    $(this).parent('.product').remove();
    i--;
  });
});

Alternatively if IE doesn't think it's the parent, you may need .closest() instead of .parent() here.

In either case pasting the HTML will be much more helpful, but these are the very common issues associated with IE and not doing something that is standard, even across IE versions.

Answer 2

It may just be worth mentioning that you will avoid SOME ie issue by using bind() instead of click(), for example:

$('.someElement').bind('click', function(){
  SomeFunction(); //or any code for that matter
})