如何删除除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>

在上面的HTML代码中我想删除除<h3>之外的所有元素和jquery中<div>内的默认内容<div class='geo_select'>。如何删除除jquery中前2个元素之外的所有元素？在我上面的场景中？

Answer 1

在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()

或者使用css，只需隐藏它即可。

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

Answer 2

如果需要，您可以使用CSS。

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