Home/ Questions/Q 7922959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T17:08:50+00:00

my code is: <!DOCTYPE html> <html> <head> <title>Demo</title> <meta charset=utf-8/> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js type=text/javascript></script> <script

  • 0

my code is:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("#table1 tr:gt(0) input[type='checkbox']").bind("click",function(){
                var id=  $(this).attr("id");
                var name=$(this).parent().next("td").text();

                if($(this).is(":checked")){
                    $("#table2").append("<tr id="+id+"><td>"+name+"</td></tr>");
                }
                else{
                    $("#table2 #"+id).remove();//why this not work in IE7?
                    //$("#"+id,$("#table2")).remove();//this work well
                }   
            })
        });
    </script>
</head>
<body>
    One:
    <table id="table1" border="1">
        <tbody>
            <tr><th></th><th>name</th></tr>
            <tr><td><input type="checkbox" id="Checkbox1" /></td><td>jim</td></tr>
            <tr><td><input type="checkbox" id="Checkbox2" /></td><td>tom</td></tr>
        </tbody>
    </table>
    <br/>
    Two:
    <table id="table2" border="1">
        <tbody>
            <tr><th>name</th></tr>
        </tbody>
    </table>
</body>
</html>

this code very simple,if table1 checkbox is checked,add the td to table2,otherwise remove td from table2,but $("#table2 #"+id).remove(); not work in ie7,i replace it to $("#"+id,$("#table2")).remove(); it can work well. who can tell me why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue is specific to IE7 probably because it doesn’t support querySelectorAll, and so Sizzle is used.

    From the looks of it, you’re creating a new element that shares the same ID as an existing element. ID’s must be unique, so you can’t expect DOM selection to work when there are dupes.

    // Here you're getting the ID of the element that was clicked
var id=  $(this).attr("id");
var name=$(this).parent().next("td").text();

if($(this).is(":checked")){

     // Here you're creating a new element with the same ID!!!
    $("#table2").append("<tr id="+id+"><td>"+name+"</td></tr>");
}
else{
    $("#table2 #"+id).remove();//why this not work in IE7?
    //$("#"+id,$("#table2")).remove();//this work well
}

    But you say this works:

    $("#"+id,$("#table2")).remove();

    That’s probably because Sizzle is doing this:

    var el = document.getElementById('table2');

    And then some thing like this:

    el.getElementsByTagName('*')

    Followed by a filter for the ID. That’s just a guess, but it isn’t that relevant anyway since the duplicate IDs must be resolved first.

    • 0