javascript - 单击时删除添加的行之一

Question

我只想删除我按下的特定 .delete 行。我如何在 jQuery 中指定它。现在它正在删除所有 p，因为我选择它作为值，但我无法弄清楚如何使其特定于每一行追加。

HTML

<div id="menu">
    <h3>Shopping list</h3>
    <div class="line">
        <p class="title">Amount</p>
        <p class="title">Product</p>
        <p class="title">Price</p>
        <div>
            <input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
            <input class='productInput' type="text" name="message" value="">
            <input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
            <button class="food">Add</button>
        </div>
        <div class="messages">
        </div>
    </div>
</div>
<div class="totalPrice">
</div>

j查询

$(document).ready(function() {

var totalPrice = 0;

$('.food').click(function() {
    var $frm = $(this).parent();
    var toAdd = $frm.children(".productInput").val();
    var addPrice = $frm.children(".priceInput").val();
    var addAmount = $frm.children(".amountInput").val();


    var div = $("<div>");
    div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>", "<p class='delete'>" + "X" + "</p>");

    $frm.parent().children(".messages").append(div);

    totalPrice += addAmount * addPrice;

    $(".totalPrice").text("Total Price: $" + totalPrice);

});


});




 $(document).on('click', '.delete', function() {
    $('p').remove()


 });

Answer 1

如果你想删除正在添加的元素，你只需要在你的函数中使用 $(this) 来引用触发调用的元素:

// When an element with the delete class is clicked
$(document).on('click', '.delete', function() {
    // Remove the closest <div> above the element that was clicked
    $(this).closest('div').remove();
});

如果您想更新定价...

当你删除你的元素时，你可能想要考虑更新你的定价，你可以通过读取你的最后一个元素并减去它来做到这一点:

$(document).on('click', '.delete', function() {
    // Get the previous element which contains your price
    var priceToSubtract = parseInt($(this).prev().text());
    // Subtract the price
    totalPrice -= priceToSubtract;
    // Update your price
    $(".totalPrice").text("Total Price: $" + totalPrice);
    $(this).closest('div').remove();
});

这将要求您将 totalPrice 变量的范围限定在 $(document).ready() block 之外，如下所示:

<script>
    var totalPrice = 0;
    $(document).ready(function() {
         // Your code here
    });
</script>