jquery Remove siblings elements, doesn't work in IE7

Question

Hi, I'm trying to remove all the sibling elements after a particular div, lets say the div tag with id = id8.

<form>    
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>

To do that I use the following code in jquery.

$("#id8 ~ div").remove();

It works fine in Firefox, but It doesn't work in IE7.

Is there an alternative way to archieve this, using jquery and just giving the tag id from the element I want to start removing the elements? Thanks

---

Thanks everybody for your help I end up with this solution based on the accepted answer

function removeAfter(el,tag){
    element = $('#'+el);
    var aElements = $(tag,element.parent());
    var index = (aElements.index(element));

    for(i=(index+1);i<aElements.length;i++) {
        $('#'+$(aElements.get(i)).attr('id')).remove();
    }
}

just call

removeAfter('id8', 'div')

Answer 1

Two things!

1) Close your <div> tags! It should look like this:

<form>
    <div id="id5">something ...</div>
    <div id="id8">something ...</div>
    <div id="id3">something ...</div>
    <div id="id97">something ...</div>
    <div id="id7">something ...</div>
    <div id="idn">some text ...</div>
</form>

2) The ~ operator only matches siblings that follow the matched element (ie it will match id3, id97, id7 and idn, but not id5). To match every sibling, including id5, you do this:

$("#id8").siblings("div").remove();

That should leave you with just id8. I tested this in Firefox 3.5.5 and IE7.0something. Hope that helps!

Answer 2

EDIT:

Editing the answer below to add what should be a fix for the problem:

$("#id8").nextAll().remove();

END EDIT.

Ok. This appears to be an interesting bug - initial testing seems to indicate it's a jquery bug although I haven't found any specific mention of it anywhere.

The bug seems to be that if your initial selector tag is the same type as its siblings then it will fail to return any siblings in IE7.

I tested it using the jQuery example code for the selector itself and was able to duplicate your problem in IE8 emulating IE7.

If you check the jquery example code I'll stick below you can see that the actual element they're using as the initial selector is a span and the sibling elements are all divs whcih seems to me to indicate they know about this bug and haven't documented it, which is both cunning and shitty.

<script>
  $(document).ready(function(){
    $("#prev ~ div").css("border", "3px groove blue");
  });
</script>

  <div>div (doesn't match since before #prev)</div>
  <span id="prev">span#prev</span>
  <div>div sibling</div>
  <div>div sibling <div id="small">div niece</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>

Change the #prev span to a div and you'll get the same failure as you're getting currently. I'd submit a bug with the jquery team.

Answer 3

Three steps here:

• Find the index number of the element we've clicked, with respect to its parent.
• Loop through all the div elements contained within this parent, starting after the one we just found

• Delete each div found

  $(document).ready(function(){
          $('#parent').children().click(function(){
           var index = ($('div',$(this).parent()).index(this));
           for(i=(index+1);i<$('div',$(this).parent()).length;i++){
            $($('div',$(this).parent()).get(i)).hide();
           }
          });
  });
  

This will work on this HTML

<div id="parent">
    <div id="c1">c1</div>
    <div id="c2">c2</div>
    <div id="c3">c3</div>
    <div id="c4">c4</div>
    <div id="c5">c5</div>
</div>

Comment here if you've got any more problems on the matter!

P.S. An application of this solution exact to your request is the following

function removeAfter(el){
 element = $('#'+el);
 var index = ($('*',element.parent()).index(element));
 for(i=(index+1);i<$('*', element .parent()).length;i++){
  $($('*', element.parent()).get(i)).hide();
 }
};