删除动态表单元素jQuery

Question

I am currently using jQuery to add dynamic form elements to my webpage. After each form element is added I want the user to be able to remove that element if necessary. I currently try and do this using jQuery, I am attempting to target certain classes and remove them, however at the moment nothing is happening and there aren't any errors in my console.

Here is my remove code and here is a JS fiddle I have made.

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

https://jsfiddle.net/zp9faa2h/

Answer 1

The .ingredient and .quantities have different parents. Thats why .parents('.ingredient .quantities') returns nothing to remove.

it would be best to wrap both these in a parent div, but you could do it like the following:-

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

This then finds the closest .ingredient goes up to the parent and removes the next container .quantities . then removes the parent of .ingredients .

Fiddle