刪除最接近的表單

Question

我創建了一個披薩表單，用戶可以選擇一個披薩，然後如果他們希望（通過克隆原始披薩表單）添加另一個比薩餅。

我希望用戶能夠刪除比薩形式，如果他們願意，但是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!"); 
    } 
}); 

Answer 1

你的問題是在未來收聽removePizza點擊事件，不僅是爲當前標籤，而且爲將來添加的元素。

所以，代替您：

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

有：

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

所以appendTo畢竟新的比薩餅刪除按鈕將繼續工作！

Answer 2

由於形式是兄弟你.removePizza按鈕，您將需要使用上一頁所有（）選擇第一/最近的上一個兄弟，例如：

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

如果還是不行，請提供你的代碼的的jsfiddle。

Answer 3

試試這個，

$("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 4

在$（ 「＃addPizza」）。點擊（）函數，你需要克隆的形式按類名稱，而不是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"); 
});