jquery - 通过jquery中的类选择子元素时，如何将每个直接子元素视为不同？

Question

我在同一级别上有两个或更多块。在这些块中，我有共同的元素，但我想对每个子元素进行不同的处理。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
       let row_len = $(".parent-row>.row").length;
        $(".parent-row>.row").each(function(index, element){
          if(index < row_len) {
             element.remove();
          }
        });
      });
    });
    </script>

    <div class="parent-row">
       <div class="row">
         A
       </div>
     </div>

    <div class="parent-row">
       <div class="row">
         A
       </div>
      <div class="row">
         A
       </div> 
     </div>

    <div class="parent-row">
       <div class="row">
         A
       </div>
      <div class="row">
         A
       </div>
      <div class="row">
         A
       </div>  
     </div>
<button type="button">Reset</button>

实际上我想删除除 A 块之外的所有 .row 元素的子元素。

我想回来：

<div class="parent-row">
   <div class="row">
     A
   </div>
 </div>

<div class="parent-row">
   <div class="row">
     A
   </div>
 </div>

<div class="parent-row">
   <div class="row">
     A
   </div>
 </div>

标签： jquery

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$("button").click(function(){
$(".parent-row .row:not(:first-child)").remove();

<button type="button">fire</button>
<div class="parent-row">
  <div class="row">
    A1
  </div>
</div>

<div class="parent-row">
  <div class="row">
    A1
  </div>
  <div class="row">
    A2
  </div> 
</div>

<div class="parent-row">
  <div class="row">
    A1
  </div>
  <div class="row">
    A2
  </div>
  <div class="row">
    A3
  </div>  
</div>