javascript - jquery js如何删除数据然后再次添加

Question

我想要实现的是，当我单击“添加到我的住宿”按钮时，它将加载数据的名称和价格。然后，在单击“添加到我的住宿”后，它将自动转换为“删除”按钮。如果我单击“删除”按钮，它将删除已加载的数据。然后，如果我再次单击“添加到我的住宿”，它将再次加载数据。你能给我一个关于如何做到这一点的想法吗这是我的 AddOns JS 及其删除按钮 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 {

                        }
                    }
                });
            }
});

我的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');
    });

我的 html 按钮及其删除

<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 是一个基于我的 css 的类，它具有 display:none;这是点击添加到我的住宿 btn 后显示数据的 div id

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

Answer 1

您应该将 element.classList.toggle 与您的 is-hidden 类一起使用，以在添加和删除按钮之间切换。

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>