如何删除jQuery中第一个元素和第二个元素以外的所有元素？

Question

HTML

<div class="geo_select">
      <h3>header 3</h3>
      <div class="row form-group">
         default content
      </div>
      <div class="row form-group">
         //Dynamic content 1 here
      </div>
     <div class="row form-group">
         //Dynamic content 2 here
      </div>

    </div>

in Above HTML code i want to remove all element except <h3> and default content <div> inside the <div class='geo_select'> in jquery.. How to remove all element except first 2 element in jquery? in my above scenario?

Answer 1

There are several ways to do that in jQuery

// use this, if there are different types of elements as child 
$('.geo_select > div:nth-of-type(n+3)').remove()

// use any of these if childs are same
$('.geo_select > div:nth-child(n+3)').remove()
$('.geo_select > div:gt(2)').remove()

// this is jQuery way which reduce the set into the range 
$('.geo_select > div').slice(2).remove()

---

Or with css, simply hide it.

.geo_select > div:nth-of-type(n+3){
   display:none;
}

Answer 2

You can just use CSS if you want.

.geo_select > div:not(:first-of-type) {
    display:none;
}