单击删除最接近的表单

Question

I have created a pizza form where the user can select a pizza and then add another pizza to the the order if they wish (by cloning the original pizza form).

I would like the user to be able to remove a Pizza Form if they wish, however the removePizza function does not behave in the way I would like (ie it does not remove the closest .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!");
    }
});

Answer 1

Your problem is to listen for removePizza click events in future, not only for the current tags but also for future added elements.

So, substitute your:

$(".removePizza").click(function() {

with:

$(document).on('click', ".removePizza", function() {

So after appendTo all new pizza remove buttons will continue to works!

Answer 2

try this,

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

Answer 3

In your $("#addPizza").click() function, the form you are cloning needs to be looked up by class name instead of ID. This is because You may have previously removed the form with that ID. And pass TRUE inside the clone function so that events get cloned too. I have commented out your line and added the modified line below. Here is a working 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");
});

Answer 4

Since the form is a sibling to your .removePizza button, you will need to use prevAll() to select the first/most recent previous sibling, for example:

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

If that doesn't work, please provide a jsFiddle of your code.