Jquery - 最後に追加された項目を削除

Question

私はJQueryにはあまり知られていませんが、それは私が学ばなければならないことです。私は現在、私が働いているプロジェクトには、請求書にあるものと同様の追加/削除機能が必要です。ミスが

$(document).ready(function() { 
    var currentItem = 1; 
    $('#addnew').click(function(){ 
    currentItem++; 
    $('#items').val(currentItem); 
var strToAdd = '<br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br>'; 
    $('#data').append(strToAdd); 

    }); 

}); 
$('#delete').on('click', function() { 
$('#items').parents("br").remove(); 

}); 

//]]> 
</script><div class="form2"> 
<form method="POST" action="invoicereg.php" id="data" name="sub"> 
    Product: 
    <select class="form" name="product1" id="product1"> 
     <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option> 
     <option value="Aramax Energy Drink">Aramax Energy Drink</option> 
    </select> 
    Nicotine: 
    <select class="form" name="nicotine1" id="nicotine1"> 
     <option value="N/A">n/a</option> 
     <option value="3mg">3mg</option> 
     <option value="6mg">6mg</option> 
     <option value="12mg">12mg</option> 
    </select> 
     Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br> 

    </form> 
    <br> 
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
    <input type="hidden" form="data" id="items" name="items" value="1" /> 
    <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
    <input class="button" type="submit" form="data" value="SUBMIT"> 
    </div> 
</div> 
</body> 
</html> 

誰もが表示され、および/または、これはそれを考えどのように行われるか私に説明できる場合など作られます包み

私は最後に追加された項目に「削除」機能を追加できるようにしたいと思います大変感謝します。 よろしくお願いします。

Answer 1

あなたのフォームのコンテンツと追加するコンテンツを<div>でラップしました。

次に、あなたは$('#data > div').last().remove();

#dataは、フォームのIDで行うことができます。

#data > divは、formの最初の子である<div>をすべて選択します。

.last()は最後の要素を選択します。

注あなたは、あなたがこれを行うことができ、あなたの形で少なくとも1つの要素維持したい場合：すべての上にいくつかを使用し

if ($('#data > div').length > 1) { 
    $('#data > div').last().remove(); 
} 

$(document).ready(function() { 
 
    var currentItem = 1; 
 
    $('#addnew').click(function(){ 
 
    currentItem++; 
 
    $('#items').val(currentItem); 
 
var strToAdd = '<div><br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br></div>'; 
 
    $('#data').append(strToAdd); 
 

 
    }); 
 

 
}); 
 
$('#delete').on('click', function() { 
 
    if ($('#data > div').length > 1) { 
 
    $('#data > div').last().remove(); 
 
    } 
 
});

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

 
</script><div class="form2"> 
 
<form method="POST" action="invoicereg.php" id="data" name="sub"> 
 
    <div> 
 
    Product: 
 
    <select class="form" name="product1" id="product1"> 
 
     <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option> 
 
     <option value="Aramax Energy Drink">Aramax Energy Drink</option> 
 
    </select> 
 
    Nicotine: 
 
    <select class="form" name="nicotine1" id="nicotine1"> 
 
     <option value="N/A">n/a</option> 
 
     <option value="3mg">3mg</option> 
 
     <option value="6mg">6mg</option> 
 
     <option value="12mg">12mg</option> 
 
    </select> 
 
     Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br> 
 
</div> 
 
    </form> 
 
    <br> 
 
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
 
    <input type="hidden" form="data" id="items" name="items" value="1" /> 
 
    <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
 
    <input class="button" type="submit" form="data" value="SUBMIT"> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Answer 2

を.Thenが適用<div class="items">yourcode</div>ようDIV with $('.items').last().remove()

$(document).ready(function() { 
 
    var currentItem = 1; 
 
    $('#addnew').click(function() { 
 
    currentItem++; 
 
    $('#items').val(currentItem); 
 
    var strToAdd = '<br><div class="items">Product: <select class="form" name="Product' + currentItem + '" id="product' + currentItem + '" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine' + currentItem + '" id="nicotine' + currentItem + '"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty' + currentItem + '" id="qty' + currentItem + '" type="number" /><br></div>'; 
 
    $('#data').append(strToAdd); 
 

 
    }); 
 

 
}); 
 
$('#delete').on('click', function() { 
 
    $('.items').last().remove() 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form2"> 
 
    <form method="POST" action="invoicereg.php" id="data" name="sub"> 
 
    <div class="items"> 
 
    Product: 
 
    <select class="form" name="product1" id="product1"> 
 
     <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option> 
 
     <option value="Aramax Energy Drink">Aramax Energy Drink</option> 
 
    </select> 
 
    Nicotine: 
 
    <select class="form" name="nicotine1" id="nicotine1"> 
 
     <option value="N/A">n/a</option> 
 
     <option value="3mg">3mg</option> 
 
     <option value="6mg">6mg</option> 
 
     <option value="12mg">12mg</option> 
 
    </select> 
 
    Quantity: 
 
    <input class="form3" type="number" id="qty1" name="qty1"></input> 
 
    <br> 
 
</div> 
 
    </form> 
 
    <br> 
 
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
 
    <input type="hidden" form="data" id="items" name="items" value="1" /> 
 
    <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
 
    <input class="button" type="submit" form="data" value="SUBMIT"> 
 
</div> 
 
</div>

Answer 3

div要素に追加されたアイテムをラップする方が良いだろう

は、何かのように言う：あなたは削除ボタンをクリックしたときに、これらすべての追加のアイテムを見つける必要があります、その後
<div class="added-item"></div>

var added_items = $('.added-item');
その後、
added_items.last().remove();