how to remove data and then add it again jquery js

Question

What i want to achieve is when i click my "Add to My Stay" button it will load the name and price of the data. then it will automatically convert to "Remove" button after clicking "Add to my stay" If i click the Remove button it will remove the data thats been loaded. Then if i click "Add to my Stay" again it will load the data again. Can you please give me an idea on how to do this Here is the code of my AddOns JS with its remove button js

$(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+'">'+name+' : '+price+'</li>');
                            $("#test4").append(item);


                        }
                        else {

                        }
                    }
                });
            }
});

My removebtn js

$('.removebtn').on("click", function(){
        var $this = $(this);
        var id = $(this).data('addon-id');
        $this.addClass('is-hidden');
        $('.addons[data-addon-id="' + id + '"]').removeClass('is-hidden');
    });

My html button with its remove

<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" >REMOVE</button>

is-hidden is a class based on my css that have display:none; Here is the div id that displays the data after clicking add to my stay btn

 <div id = "test4"><span></span></div>

Answer 1

In jQuery, you could use $("...").toggleClass("is-hidden") to switch between your add & remove button.

You can use .empty() to clear your data and .html("your_data") to set it.

var addBtn = $("#add");
var removeBtn = $("#remove");
var contentDiv = $("#content");

addBtn.click(() => {
  // load data
  contentDiv.html("YOUR_DATA");
  addBtn.toggleClass("d-none");
  removeBtn.toggleClass("d-none");
});

removeBtn.click(() => {
  contentDiv.empty();
  addBtn.toggleClass("d-none");
  removeBtn.toggleClass("d-none");
});

.d-none {
  display: none;
}

<button id="add">Add</button>
<button id="remove" class="d-none">Remove</button>
<div id="content"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

You should use element.classList.toggle with your is-hidden class to switch between your add & remove button.

var addBtn = document.getElementById("add");
var removeBtn = document.getElementById("remove");
var contentDiv = document.getElementById("content");

addBtn.onclick = () => {
  // load data
  contentDiv.innerHTML = "YOUR_DATA";
  addBtn.classList.toggle("d-none");
  removeBtn.classList.toggle("d-none");
};

removeBtn.onclick = () => {
  contentDiv.innerHTML = "";
  addBtn.classList.toggle("d-none");
  removeBtn.classList.toggle("d-none");
};

.d-none {
  display: none;
}

<button id="add">Add</button>
<button id="remove" class="d-none">Remove</button>
<div id="content"></div>