刪除動態表單元素jQuery

Question

我目前使用jQuery將動態表單元素添加到我的網頁。在添加每個表單元素後，我希望用戶能夠根據需要刪除該元素。我目前嘗試使用jQuery來做到這一點，我試圖定位某些類並將其刪除，但此刻沒有任何事情發生，並且我的控制檯中沒有任何錯誤。

這是我的刪除代碼，這裏是我做的JS小提琴。

$(document).on('click', '.ingredient .remove', function() { 
    $(this).parents('.ingredient .quantities').remove(); 
    return false; 
}); 

https://jsfiddle.net/zp9faa2h/

Answer 1

的.ingredient和.quantities有不同的父母。這就是爲什麼.parents('.ingredient .quantities')返回什麼都不能刪除。

這將是最好能包住這兩個在父DIV，但你可以做這樣的： -

$(document).on('click', '.ingredient .remove', function() { 
    $(this).closest('.ingredient').parent().next().remove(); 
    $(this).closest('.ingredient').parent().remove(); 
    return false; 
}); 

這則查找最接近.ingredient上升到父，並刪除下一個容器.quantities。然後刪除.ingredients的父項。

Fiddle