How to treat as different for each direct child while selecting child elements via class in jquery?

user_10030373 0
Viewed 57

I have two or more blocks on same level. Inside these blocks I have common elements, but I want to treat differently for each child elements.

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

Actually I want to delete all the child elements of .row elements except A block.

I want get back as :

<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
5 Answers
<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>
user_79398640

To delete just the first one you can compare the content of the Row with "A" like this....

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

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

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

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

user_28947980

Actually I want to delete all the elements except the first one.

Hence you may select all elements except the first one:

$(".parent-row>.row:not(:first)")


$(document).ready(function () {
    $("button").on('click', function (e) {
      $(".parent-row>.row:not(:first)").remove();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-row">
    <div class="row">
        A
    </div>
</div>

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

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

Actually I want to delete all the child elements of .row elements except A block.

In this case you may combine :contains() and :not() selectors:

$(".parent-row>.row:not(:contains(A))")


$(document).ready(function () {
    $("button").on('click', function (e) {
        $(".parent-row>.row:not(:contains(A))").remove();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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

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

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

If, instead, you are looking for the exact match you may .filter():

$(".parent-row>.row").filter((idx, ele) => ele.textContent.trim() != 'A').remove();


$(document).ready(function () {
    $("button").on('click', function (e) {
        $(".parent-row>.row").filter((idx, ele) => ele.textContent.trim() != 'A').remove();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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

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

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

user_38805850 
$(document).ready(function(){
    $("button").click(function(){
        let row_len = $(".parent-row>.row").length;
        $(".parent-row>.row").each(function(index, element){
        if(( index < row_len ) && ( index != 0)) {
                element.remove();
            }
        });
    });
});
user_109167200

Hope this is what you need

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

OR

$("button").click(function(){
 $(".parent-row>.row").each(function(index, element){
  if(index>0)
   element.remove();
 })
});
user_98106760
Related