Magento 2 - How does the remove wishlist button work?

Question

I am wondering how does the remove wishlist button work?

i have checked the code, and there is no form tag around it.

How can it post to the remove item controller in vendor/magento/module-wishlist/Controller/Index/Remove.php

<div class="actions-secondary">
    <a href="#" data-bind="attr: {'data-post': delete_item_params}" title="Remove This Item" class="btn-remove action delete" data-post="{&quot;action&quot;:&quot;http:\/\/m226.test\/wishlist\/index\/remove\/&quot;,&quot;data&quot;:{&quot;item&quot;:&quot;2&quot;,&quot;uenc&quot;:&quot;aHR0cDovL20yMjYudGVzdC93aXNobGlzdC9pbmRleC9pbmRleC93aXNobGlzdF9pZC8xLw,,&quot;}}">
        <span>Remove This Item</span>
    </a>
</div>

Answer 1

Magento remove wishlist button uses AJAX call with knockout.js.

You can see remove button syntax with data-bind and data-params on a tag.
Using the data-params it will call action path "http://m226.test/wishlist/index/remove/" and complete the remove wishlist item process with use of "/wishlist/index/remove" controller.

Also you can use something like this to remove wishlist using jQuery.

jQuery(".wishlist-link .removeWishlist").click(function(e){
            e.preventDefault();
            var actiondata = jQuery.parseJSON(jQuery(this).attr('data-post'));
            var addurl = actiondata.action;
            var data = actiondata.data;
            data['isAjax'] = true;
            jQuery.ajax({
                showLoader: true,
                url: addurl,
                data: data,
                type: "POST",
                dataType: 'json'
            }).done(function (data) {
                console.log(data);
            });
            return false;
        });