Jquery Remove sibling items not working in IE7

Question

I am trying to remove all sibling elements after a specific div, say a 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>

For this, 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 of archiving this using jquery and just specifying the tag id from the element that I want to start deleting elements? Thanks

---

Thank you all for your help. I get 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

Three steps here:

• Find the index number of the item we clicked on relative to its parent.
• div, , ,

• div

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

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>

, - !

P.S. , ,

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

Answer 2

!

1) <div> ! :

<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) ~ , (.. id3, id97, id7 idn, id5). , id5, :

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

id8. Firefox 3.5.5 IE7.0. , !

Answer 3

EDIT:

, , :

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

END EDIT.

Ok. - , -, jquery, .

, , , , IE7.

jQuery IE8, IE7.

jquery, , , , , - span, sibling - divs, , , , , .

<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>

#prev span div, , . jquery.