CODEWITHSUNDEEP
javascriptjqueryhtml
Jed Jamir
Jed Jamir

Reputation: 77

How to delete a data based on a button

What i accomplished now is when i clicked "add to my stay" button, it will display the name and price data and it will automatically switch to remove button and then click again for another addon to display another name and price data. Now if i press the remove button of the 1st "add to my stay" it will delete both data on each button that i pressed adding. My goal is to remove a data based on its button ID like i want to remove The data on my 1st "Add to my stay" button it will only delete the 1st data MY JS CODE FOR REMOVE it is outside the (document).ready

function Remove(id) {
            console.log("call remove");

            $('li.price').each(function (index, object) {
                var id2 = $(object).data('addon-id');
                console.log(id);
                if (id2 === id2) {
                    $(object).remove();
                }
            });
            $(this).addClass('is-hidden');
        $('.addons[data-addon-id="' + id + '"]').removeClass('is-hidden');
        }

My code for getting the data on add to my stay button

$(document).ready(function(){
    $(".addons").on("click", function(event) {
        event.preventDefault();


        var $this = $(this);
        var id = $(this).data('addon-id');
        name = $(this).data('name');
        price = $(this).data('price');

        console.log(id);

        $(this).addClass('is-hidden');
        $('.removebtn[data-addon-id="' + id + '"]').removeClass('is-hidden');
        if(id != '')

            {

                    $.ajax(
                {
                    type:"POST",
                    url : "Pages/addonajax",
                    data:{id:id,
                        name:name,
                        price:price},


                    success:function(data)
                    {
                            console.dir(data);
                            if (data) {

                            var item = $('<li data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
                                         $("#test1").append(item);
                               Total();

                        }
                        else {

                        } 
                    }
                });
      }      
});

My code on the button

<button data-name = "Airport Transfer" data-price = "4300"  class="addons addon-btn trans_200" data-addon-id ="1">ADD TO MY STAY</button>
<button class="removebtn remove-btn  is-hidden trans_200" data-addon-id ="1" onclick="Remove(1)" value="Remove">Remove</button>

Upvotes: 3

Views: 322

Answers (1)

Ryan Wilson
Ryan Wilson

Reputation: 10765

Your problem is here:

if (id2 === id2) {
    $(object).remove();
}

id2 will always be equal to itself, and therefore you will always call $(object).remove();

You need to compare id2 to id

if (id2 === id) {
    $(object).remove();
}

EDIT

You also have a problem in your loop of the list items:

var id2 = $(object).data('addon-id');

Your list items do not have a data-addon-id attribute

Put a data-addon-id on the list item when you create it:

var item = $('<li data-addon-id="' + id + '" data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
$("#test1").append(item);

Upvotes: 2

Related Questions