同じクラスの既存の兄弟を削除します。

Question

<div class="slides"> 
<img class="item-1 cardone" src="images/cardone.jpg"/> 
<img class="item-2 cardtwo" src="images/cardtwo.jpg"/> 
<img class="item-3 cardthree" src="images/cardthree.jpg"/> 
<img class="item-4 cardfour" src="images/cardfour.jpg"/> 
<img class="item-5 cardfive" src="images/cardfive.jpg"/> 
</div> 

<img class="cardone" src="images/cardone.jpg"/><!-- gets added to slides on click, existing image with same class removed at the same time--> 

$('.cardone').click(function(){ 
    var newSrc = $(this).attr('class'); 
    $(this).insertAfter($('.slides img:nth-child(2)')).addClass('item-3'); 
    $('.slides img').not(this).removeClass(newSrc); 
}); 

カードンがクリックされると、スライドに追加され、既存のイメージを同じクラス名で置き換えようとします。最も遠いのはクラスを削除することですが、画像そのものを削除することはありません。

Answer 1

あなたは以下のようにそれを行うことができます： -

$("."+newSrc+"").not(this).remove(); 

例： - あなたは `img`を挿入するのではなく、単にその` src`を変更することを考えると

$('.cardone').click(function(){ 
 
    var newSrc = $(this).attr('class'); 
 
    $("."+newSrc+"").not(this).remove(); 
 
    $(this).insertAfter($('.slides img:nth-child(2)')).addClass('item-3'); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slides"> 
 
<img class="item-1 cardone" src="images/cardone.jpg"/> 
 
<img class="item-2 cardtwo" src="images/cardtwo.jpg"/> 
 
<img class="item-3 cardthree" src="images/cardthree.jpg"/> 
 
<img class="item-4 cardfour" src="images/cardfour.jpg"/> 
 
<img class="item-5 cardfive" src="images/cardfive.jpg"/> 
 
</div> 
 

 
<img class="cardone" src="images/cardone.jpg"/> // gets added to slides on click, existing image with same class removed at the same time.