jquery Remove siblings elements, doesn't work in IE7

Question

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

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