如何删除数据然后再次添加它 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 = () => {&nbsp; // load data&nbsp; contentDiv.innerHTML = "YOUR_DATA";&nbsp; addBtn.classList.toggle("d-none");&nbsp; removeBtn.classList.toggle("d-none");};removeBtn.onclick = () => {&nbsp; contentDiv.innerHTML = "";&nbsp; addBtn.classList.toggle("d-none");&nbsp; removeBtn.classList.toggle("d-none");};.d-none {&nbsp; 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(() => {&nbsp; // load data&nbsp; contentDiv.html("YOUR_DATA");&nbsp; addBtn.toggleClass("d-none");&nbsp; removeBtn.toggleClass("d-none");});removeBtn.click(() => {&nbsp; contentDiv.empty();&nbsp; addBtn.toggleClass("d-none");&nbsp; removeBtn.toggleClass("d-none");});.d-none {&nbsp; 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>