如何删除数据然后再次添加它 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; 这是点击add to my stay 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>

Answer 2

在 jQuery 中，您可以使用 $("...").toggleClass("is-hidden") 在添加和删除按钮之间切换。

您可以使用.empty() 清除您的数据并使用.html("your_data") 进行设置。

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>