jquery find nearest class and remove it

Question

I am trying to remove list_product entire block if that particular delete class is clicked. I am very new to jquery and still learning.

<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan</div>
     </div>
</div>
<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan 2</div>
     </div>
</div>
<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan 3</div>
     </div>
</div>
<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan 4</div>
     </div>
</div>

Jquery:

$('.delete').click(function() {
   $(this).find('.list_product').remove();
});

Is not working. may i know why and how do i fix it? thanks

Answer 1

Try this:

$(document).on('click', '.delete', function(e) {
   e.preventDefault();
   $(this).closest('.list_product').remove();
   return false;
});

Answer 2

Just do $(this).closest('.list_product').remove().
API ref: http://api.jquery.com/closest/
find searches through the children of the current element. In this case, the .delete elements don't have any children. Conversely, closest goes up thru the DOM, looking for the first ancestor with the class list_product. Hope this helps.