单击删除最近的窗体

Removing the closest form on click

本文关键字：窗体 最近 删除 单击      更新时间：2023-09-26

我创建了一个披萨表单，用户可以在其中选择一个披萨，然后如果愿意（通过克隆原始披萨表单），将另一个披萨添加到订单中。

如果用户愿意，我希望用户能够删除Pizza Form，但是removePizza功能的行为方式与我希望的不同（即，它不会删除最接近的.pizzaForm）

HTML:

<div id="1" class="pizzaForm">
    <fieldset>
        <form class="pure-form">
        <legend>Pizza</legend>
        <label><b>Pizza Type: &nbsp;</b></label>
        <select id="pizza">
            <option>Please Select:</option></option>
            <option name="margarita">Margarita</option>
            <option name="deep-pan">Deep Pan</option>
            <option name="stuffed-crust">Stuffed Crust</option>
        </select>
            <span style="float:right">
            <label><b>Pizza Size: &nbsp;</b></label>
            <select id="pizzaSize">
                <option data-price="0">Please Select:</option></option>
                <option name="e-small" data-price="4.99">Extra Small - £4.99</option>
                <option name="small" data-price="5.99">Small - £5.99</option>
                <option name="medium" data-price="6.99">Medium - £6.99</option>
                <option name="large" data-price="8.99">Large - £8.99</option>
                <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
                <option name="f-size" data-price="10.99">Family Size - £10.99</option>
            </select>
            </span>
        </form>
    </fieldset>
    <fieldset style = "border-top:0px">
    <form class="pure-form">
        <legend><b>Toppings (99p Each): &nbsp;</b></legend>
        <input type="checkbox" name="onions">Onions</input>
        <input type="checkbox" name="mushrooms">Mushrooms</input>
        <input type="checkbox" name="peppers">Peppers</input>
        <input type="checkbox" name="olives">Olives</input>
        <input type="checkbox" name="garlic"> Garlic</input>
        <input type="checkbox" name="peperoni">Peperoni</input>
        <input type="checkbox" name="cheese">Pesto</input>
    </form>
    </fieldset>
    <h2 style= "float:left; margin-top:-3cm; margin-left: 8cm; border: solid black 2px; padding: 5px; width:2cm; text-align:center"> £0.00 </h2>
    <button class="removePizza" style= "float:left; margin-top:-1.5cm; margin-left: 7.8cm;">Remove Pizza</button>
    <br>
</div>
<div id="extraPizza"></div>
<center><button id="addPizza"> Add Pizza </button></center>

JavaScript:

var pizzaArray = new Array();
function pizza(number, pizzaCost, toppingCost) {
    this.pizzaNumber = number;
    this.pizzaCost = pizzaCost;
    this.toppingCost = toppingCost;
}
var pizzaCounter = 1;
pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00));
$("#pizza").change(function() {
    $("#pizzaSize").prop('disabled', false);
})
$(document).on("change","#pizzaSize", function() {
    var formID = $(this).closest('div').attr("id");
    for(var i = 0; i < pizzaArray.length; i++) {
        if (pizzaArray[i].pizzaNumber == formID) {
            var selectionPrice = $('option:selected', this).attr('data-price');
            var selectionInt = parseFloat(selectionPrice, 10);
            pizzaArray[i].pizzaCost = selectionInt;
            calculateCost();
        }
    }
});
$(document).on("change","input[type='checkbox']", function() {
    var checked = $(this).parent().find(":checkbox:checked").length;
    var toppingCost = (0.99 * checked);
    var formID = $(this).closest('div').attr("id");
    for(var i = 0; i < pizzaArray.length; i++) {
        if (pizzaArray[i].pizzaNumber == formID) {
            pizzaArray[i].toppingCost = toppingCost;
            calculateCost();
        }
    }
});
$( "#addPizza" ).click(function() {
    pizzaCounter++;
    pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00));
    $("#1").clone().prop("id", pizzaCounter).appendTo("#extraPizza");
    $("#"+pizzaCounter).find("input[type='checkbox']").removeAttr('checked');
    $("#"+pizzaCounter).find("h2").removeAttr('checked').html("£0.00");
});
$(".removePizza").click(function() {
    var numOfForms = $( ".pizzaForm" ).length;
    if (numOfForms > 1) {
        $(this).closest('.pizzaForm').remove();
    } else {
        alert ("Cannot delete this form!");
    }
});

您的问题是在未来监听removePizza点击事件，不仅监听当前标签，还监听未来添加的元素。

所以，替换你的：

$（".removePizza"）.click（function（）{

带有：

$（document）.on（'click'，".removePizza"，function（）{

所以在appendTo所有新披萨删除按钮后，将继续工作！

试试这个，

$("body").on('click','.removePizza',function() {
    var numOfForms = $(this).parents('.pizzaForm').length;
    if (numOfForms >= 1) {
        $(this).parents('.pizzaForm').remove();
    } else {
        alert ("Cannot delete this form!");
    }
});

在$（"#addPizza"）.click（）函数中，需要按类名而不是ID查找要克隆的表单。这是因为您以前可能已经删除了具有该ID的表单。在克隆函数中传递TRUE，这样事件也会被克隆。我已经注释掉了你的行，并在下面添加了修改后的行。这是一个正在工作的jsFiddle：https://jsfiddle.net/ashekthegreat/qt0cgvy2/

$("#addPizza").click(function() {
  pizzaCounter++;
  pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00));
  // $("#1").clone().prop("id", pizzaCounter).appendTo("#extraPizza");
  $(".pizzaForm:first").clone(true).prop("id", pizzaCounter).appendTo("#extraPizza");
  $("#" + pizzaCounter).find("input[type='checkbox']").removeAttr('checked');
  $("#" + pizzaCounter).find("h2").removeAttr('checked').html("£0.00");
});

由于表单是你的.removePizza按钮的兄弟，你需要使用prevAll（）来选择第一个/最近的上一个兄弟，例如：

$(this).prevAll('.pizzaForm:first').remove();

如果这不起作用，请提供您的代码的jsFiddle。

相关文章：