2
votes

Comment traiter comme différent pour chaque enfant direct lors de la sélection des éléments enfants via la classe dans jquery?

J'ai deux blocs ou plus au même niveau. À l'intérieur de ces blocs, j'ai des éléments communs, mais je veux traiter différemment pour chaque élément enfant.

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

En fait, je veux supprimer tous les éléments enfants des éléments .row à l'exception du bloc A. p >

Je veux revenir en tant que:

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

jquery

0 commentaires

5 Réponses :

0
votes

Pour supprimer uniquement le premier, vous pouvez comparer le contenu de la ligne avec "A" comme ceci ....

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

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

4 commentaires

veuillez vérifier à nouveau

Merci @Renzo Calla J'ai juste besoin de changer == en! =

mais supposons qu'il y ait alors plusieurs éléments identiques?

Je suggérerais d'ajouter une classe ou un attribut à tous les éléments que vous souhaitez supprimer de cette façon, vous pouvez simplement utiliser $ (". Delete"). Remove ()

0
votes

En fait, je souhaite supprimer tous les éléments sauf le premier.

Par conséquent, vous pouvez sélectionner tous les éléments sauf le premier:

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

$(document).ready(function () {
    $("button").on('click', function (e) {
        $(".parent-row>.row").filter((idx, ele) => ele.textContent.trim() != 'A').remove();
    });
});

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

En fait, je souhaite supprimer tous les éléments enfants des éléments .row à l'exception du bloc A.

Dans ce cas, vous pouvez combiner : contains () et : not () sélecteurs:

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

$(document).ready(function () {
    $("button").on('click', function (e) {
        $(".parent-row>.row:not(:contains(A))").remove();
    });
});

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

Si, à la place, vous recherchez la correspondance exacte, vous pouvez .filter () :

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

$(document).ready(function () {
    $("button").on('click', function (e) {
      $(".parent-row>.row:not(:first)").remove();
    });
});

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

0 commentaires

0
votes

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

0 commentaires

0
votes

J'espère que c'est ce dont vous avez besoin

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

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

0 commentaires

2
votes

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

0 commentaires