Remove div with ajax not working

Question

When I click on a button, parent div is not deleted, nothing was called.

My JavaScript part:

<script>
    $(document).ready(function()
{
    $('.delete').click(function() {
        var parent = $(this).closest('div');
        $.ajax({
            type: 'get',
            url: 'delete.php', // <- replace this with your url here
            data: 'ajax=1&delete=' + $(this).attr('id'),
            beforeSend: function() {              
                parent.animate({'backgroundColor':'#fb6c6c'},300);
            },
            success: function() {
                parent.fadeOut(300,function() {
                    parent.remove();
                });
            }
        });        
    });
});

And my HTML part

<div> 
   Some name
   <button type="submit" class="delete" value="Delete" id="multipleValues">Delete</button>                                
</div>

And this div is inside Jquery dynatree extension

Answer 1

<script>
$(document).ready(function () {
    $(document).on('click', '.delete', function () {
        var this = $(this);
        $.ajax({
            type: 'get',
            url: 'delete.php', 
            data: {some_data:data},
            beforeSend: function () {
                this.closest('div').animate({
                    'backgroundColor': '#fb6c6c'
                }, 300);
            },
            success: function (data) {
                this.closest('div').fadeOut(300, function () {
                    this.closest('div').remove();
                });
            }
        });//ajax ends
    });//click event ends
});//dom ready ends
 <script>