IE7 failing to remove an element according to it's href attribute

Question

Ah, is it ever really over if there's still an IE?

Thanks to the invaluable help of Stack Overflowers, I have my jQuery working perfectly in FF, Safari, Chrome & Oprah. Naturally, it fails in IE7, which evidently has trouble href attributes, e.g.:

$('li a[href="' + title + '"]').parent().remove();

Can someone shed some light on an alternative syntax that IE7 will understand to remove the un-checked item from the list? Many thanks in advance!

Here's the works:

<div class="product-module">
<div class="product-pic">
    <div class="checkbox-wrapper">
        <label for="compare1">
            <input type="checkbox" class="checkbox" name="compare" id="compare1" />
            Compare
        </label>
    </div>
</div>

<div class="product-info">
    <p><a href="#" title="#"><span class="product-name">Product Name here</span></a></p>    
</div>

<div class="compare">
<ul>
</ul>
<p class="compare-button"><button type="submit">Compare</button></p>
<p class="clear-selections"><a class="button" id="clear-selections" href="#">Clear Selections</a></p>

<script type="text/javascript">

// clear all checkboxes on load
$(function(){
    $('input[type="checkbox"]').attr('checked', false);
});


$(function(){
    $('.column-main input[type="checkbox"]').click(function()    {
        var title = $(this).closest('.product-module').find('.product-name').html();

        // if user checks the checkbox, add the item to the ul
        if    ($(this).attr('checked'))    {
        var html = '<li><a href="'+title+'">' + title + '</a></li>';
        $('.compare ul').append(html);

        // un-checking the checkbox removes the corresponding item from the ul
        }    else {
        // $('.compare li a').attr('href', title).parent().remove();
        $('li a[href="' + title + '"]').parent().remove();        //    works in real browsers; fails in IE7
        }
    })
});



    $(function(){
    $('.clear-selections').click(function(){
        $('.compare ul').empty();
        $('input[type="checkbox"]').attr('checked', false);
    })
});


$(function(){
    $('.compare button').click(function(){
        minRequests = 2;
        maxRequests = 3;
        requested = $('.compare ul li').size();    // go figure: why not .length()?

        if(requested < 2)    {
        alert ('Compare ' + requested + ' products?');

        } else if((requested >= 2) && (requested <= 5 ))    {
        alert ('There are ' + requested + ' products to compare');

        } else {
        alert (requested + ' is too many');
        }
    });
});

Answer 1

Did you compare the title to the href of the element? I believe in IE it uses the absolute url instead of relative, so you may want to double check the href value before assuming something will work.

You may be able to use [href*= instead of href=

Never assume, always check. Do alerts on the attr('href') and make sure they match.