Добавить удаленный элемент обратно в DOM jQuery 2

Question

У меня есть следующий код, где я хочу удалить и добавить элемент обратно в DOM в jQuery:

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

Сначала создайте переменную для вашего клона .pm-container вне функции ajax

Примечание *: Когда вы используете .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/

Answer 2

Когда вы удалите элемент, он исчез.нет никакого способа вернуть это.Одно из решений состоит в том, чтобы клонировать элемент в переменную и иметь возможность использовать его позже:

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);
        }
    }
}); }

Однако для вашего случая Best way может скрывать и показывать обратноэлемент:

$(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();
        }
    }
}); }