问题描述:

$('.icn-trash').on('click', function(e) {

e.preventDefault();

deleteBookmark($('.del').data('bookmarkid'));

});

function deleteBookmark(bookmarkID) {

$.ajax({

url: '/BookmarkApi/delete/' + bookmarkID,

type: 'POST',

success: function(response) {

$('.icn-trash').closest('.del').remove();

console.log('removed');

},

error: function(error) {

}

});

}

HTML - it will be generated dynamically for every bookmark folder.

<a href="#" class="del" data-bookmarkid="xxx">

<span class="actions" style="z-index:300">

<i class="icn-trash"></i>

</span>

</a>

Everytime, I try to delete the specific id of the bookmark folder, multiple folders are removed. It should only remove one specific folder when clicking trash icon. When I clicked trash icon on 6th folder, the 1st, 2nd, 3rd, 4th, 5th folders will disappear and i refreshed again only to find 1st folder actually being removed from database.

I want to have 6th folder disappear and removed from database.

Help appreciated.

网友答案:

Try this way

   $(document).on('click', '.icn-trash',function(evt) {
        evt.preventDefault();
        var b_id=$(this).closest('.del').data('bookmarkid')
        $.ajax({
            url: '/BookmarkApi/delete/' + b_id,
            type: 'POST',
            success: function(response) {
                $(this).closest('.del').remove();
                console.log('removed');
            },
            error: function(error) {

            }
        });

});
网友答案:

I would bind the event on the a tag:

$('.del').on('click', function(e) {
    e.preventDefault();
    deleteBookmark(this);
});

function deleteBookmark(ele) {
    $.ajax({
        url: '/BookmarkApi/delete/' + $(ele).data('bookmarkid'),
        type: 'POST',
        success: function(response) {
            $(ele).remove();
            console.log('removed');
        },
        error: function(error) {

        }
    });
}

Or if you still want to bind on .icn-trash:

$('.icn-trash').on('click', function(e) {
    e.preventDefault();
    deleteBookmark($(this).closest('.del'));
});

function deleteBookmark(ele) {
    $.ajax({
        url: '/BookmarkApi/delete/' + ele.data('bookmarkid'),
        type: 'POST',
        success: function(response) {
            ele.remove();
            console.log('removed');
        },
        error: function(error) {

        }
    });
}
网友答案:

You are removing content using class attribute that return collection of all the links and remove the links.

  $('.icn-trash').on('click', function (e) {
                    debugger
                    event.preventDefault()
                    deleteBookmark(this);
                });

          function deleteBookmark(obj) {
                debugger
                bookmarkID = $('.del').data('bookmarkid');
              $(obj).remove();
                $.ajax({
                    url: '/BookmarkApi/delete ,
 data: { bookmarkID: bookmarkID},
                    type: 'POST',
                    success: function (response) {

                        console.log('removed');
                    },
                    error: function (error) {

                    }
                });
            }
网友答案:

From the jQuery Documentation of closest API

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Now what is happening in the code $('.icn-trash').closest('.del').remove();

$(.icn-trash') is returning the set of all element elements having the class icn-trash. And then you are using this set to find the closest element with class .del which will return a set of all anchor tags (in your html example). Finally you are removing the entire set. Hence multiple bookmarks are getting deleted.

I am assuming you need to delete the anchor tag which has the data-bookmarkid as bookmarkID

$('.icn-trash').on('click', function(e) {
    e.preventDefault();
    deleteBookmark($('.del').data('bookmarkid'));
});

function deleteBookmark(bookmarkID) {
    $.ajax({
        url: '/BookmarkApi/delete/' + bookmarkID,
        type: 'POST',
        success: function(response) {
            // get the element with data-bookmarkid = bookmarkID and remove it
            $("[data-bookmarkid='" + bookmarkID + "']").remove()
            console.log('removed');
        },
        error: function(error) {

        }
    });
}

EDIT: I didn't read the last part of your question

When I clicked trash icon on 6th folder, the 1st, 2nd, 3rd, 4th, 5th folders will disappear and i refreshed again only to find 1st folder actually being removed from database.

Can you make sure that the bookmarkIds are correct in the data-bookmarkid attribute? Since clicking on 6th trash icon is removing the 1st folder from the database, there seems to be a problem either with your server code or the data-bookmarkid attribute is incorrect in the 6th trash icon

EDIT2: Why you are getting the wrong bookmarkId (Didn't investigat enough thoroughly earlier, got involved in something else)

Again quoting from jQuery documentation for data API

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

So analyzing your code deleteBookMark($('.del').data('bookmarkid')): $('.del') will contain all the elements with class name del (in your example all the anchor tags). Calling .data('bookmarkid') with the entire set will return the bookmark id of the first anchor tag. The best way to do this is to first obtain the element which was clicked. This can be done by modifying your code

Again from jQuery Documentation for Event Listener

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered;... To create a jQuery object from the element so that it can be used with jQuery methods, use $( this ).

This means that

$('.icn-trash').on('click', function(e) {
   e.preventDefault();
  deleteBookmark($('.del').data('bookmarkid'));
});

In the listener you have attached, this will refer to the .icn-trash element you clicked on. So now you know which element was clicked, find the closest .del element and then get its data-bookmarkid attribute. i.e.

$('.icn-trash').on('click', function(e) {
   e.preventDefault();
   var curIconTrash = $(this),
       closestAnchor = curIconTrash.closest('.del'),
       bookMarkId = closestAnchor.data('bookmarkid')

   deleteBookmark(bookmarkId);
});

Or taking the advantage of jQuery chaining

$('.icn-trash').on('click', function(e) {
   e.preventDefault();
   deleteBookmark($(this).closest('.del').data('bookmarkid'));
});

Note: This was also suggested by @sreedhar-r

Hope this helps! Cheers :-)

相关阅读:
Top