如何删除数据然后再次添加它 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>

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>