将删除的元素添加回 DOM jQuery 2

Question

我有以下代码，我想在其中删除元素并将其添加回jQuery中的DOM：

var pm_container = $(document).find('.pm-container');
$(document).on('change', '#payment-form .cat_field', function(){
displayPrice($(this), pm_container);
});
function displayPrice(elem, pm_container){
$.ajax({
type: 'GET',
url: 'getamount.php',
dataType: 'json',
cache: false,
success: function (data) {
var amount_field = $(document).find('#payment-form #amount');
amount_field.val(data.price);
if(amount_field.val() == 0) {
$(document).find('.pm-container').remove();
} else {
$(document).find('.save-listing').prev(pm_container);
}
}
});
}

出于某种原因，当amount_field的值不等于零时，我的元素.pm-container不会添加回我的页面。

知道为什么吗？

感谢您的任何帮助。

Answer 1

当您删除该元素时，它就消失了。 没有办法把它找回来。 一种解决方案是将元素克隆到变量中，以便以后能够重用它：

var pm_container = $(document).find('.pm-container').clone();
$(document).on('change', '#payment-form .cat_field', function(){
displayPrice($(this), pm_container); });
function displayPrice(elem, pm_container){
$.ajax({
type: 'GET',
url: 'getamount.php',
dataType: 'json',
cache: false,
success: function (data) {
var amount_field = $(document).find('#payment-form #amount');
amount_field.val(data.price);
if(amount_field.val() == 0) {
$(document).find('.pm-container').remove();
} else {
$(document).find('.save-listing').prepend(pm_container);
}
}
}); }

但是，对于您的情况，最好的方法可能是隐藏并显示元素：

$(document).on('change', '#payment-form .cat_field', function(){
displayPrice($(this)); });
function displayPrice(elem){
$.ajax({
type: 'GET',
url: 'getamount.php',
dataType: 'json',
cache: false,
success: function (data) {
var amount_field = $(document).find('#payment-form #amount');
amount_field.val(data.price);
if(amount_field.val() == 0) {
$(document).find('.pm-container').hide();
} else {
$(document).find('. pm-container').show();
}
}
}); }

Answer 2

首先在 ajax 函数外部为您的克隆.pm-container创建一个变量

注意*：当您使用 .remove(( 时，您无法将其收回。

var container = $(".pm-container").clone();

然后在您的 Ajax 函数中

if (amount_field.val() == 0) {
$(".pm-container").detach();
} else {
container.insertBefore($(".save-listing"));
}

JSFIDDLE： https://jsfiddle.net/marksalvania/3h7eLgp1/