JQuery - .remove（）関数のヘルプ

Question

コードに問題があります。remove（）関数を追加するだけで、サイトセクションとPRMセクションで問題が1つしか表示されません。ここで

は「問題」のビデオキャプチャです：http://recordit.co/HGak32nwpy
私はアイテムを追加すると、私は本当に追加最後の私のセクションの最後を消去する必要はありません。例として、第1の会社に2つのサイトを追加し、第2の会社に3つのサイトを追加します。最初の会社のremove（）ボタンを押すと、作成された最後のサイトではなく、最初の会社の最後のサイトだけを追加します。 PRMセクションでも同じことです。

ご協力いただきありがとうございます。

Here is a JSFiddle for the code

$(document).ready(function() { 
 
    var counter = 2; 
 
    $('#btnAdd').on('click', function() { 
 
    $('#company').append('<li><hr> Company N°' + counter + ' <input id="siteAdd" type="button" value="Add Site" /><input id="siteRemove" type="button" value="X"/></li>'); 
 
    counter++; 
 
    }); 
 
    $("#btnRemove").on('click', function() { 
 
    if (counter == 2) { 
 
     alert("You need to have at least one company !"); 
 
     return false; 
 
    } 
 
    $('li:last').remove(); 
 
    counter--; 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    var counter = 1; 
 
    $('#company').on('click', '#siteAdd', function() { 
 
    $(this).closest('li').append('<p>Site N°' + counter + ' <input id="prmAdd" type="button" value="Add PRM" /><input id="prmRemove" type="button" value="X" /></p>'); 
 
    counter++; 
 
    }); 
 
    $('#company').on('click', '#siteRemove', function() { 
 
    if (counter == 1) { 
 
     alert("You need to have at least one site !"); 
 
     return false; 
 
    } 
 
    $('p:last').remove(); 
 
    counter--; 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    var counter = 1; 
 
    $(document).on('click', '#prmAdd', function() { 
 
    $(this).closest('li p').append('<span style="margin-left: 10px;">PRM N°' + counter + '</span>'); 
 
    counter++; 
 
    }); 
 
    $(document).on('click', '#prmRemove', function() { 
 
    if (counter == 1) { 
 
     alert("You need to have at least one PRM !"); 
 
     return false; 
 
    } 
 
    $('span:last').remove(); 
 
    counter--; 
 
    }); 
 
});

<div id="company"> 
 
    <li> Company N°1 
 
<input id="siteAdd" type="button" value="Add Site" /> 
 
<input id="siteRemove" type="button" value="X" /> 
 
    </li> 
 
</div> 
 
<br> 
 
<input id="btnAdd" type="button" value="+ Company" /> 
 
<input id="btnRemove" type="button" value="- Company" /> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Answer 1

あなたは常にページの最後のPを取得し、それを削除するには、次のコードを変更

$('p:last').remove(); 

へ

$(this).closest('li').find('p:last').remove();