Add removed element back to DOM jQuery 2

Question

I have the following code where I wanna remove and add an element back to the DOM in 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);
            }
        }
    });
}

For some reason, when the value of amount_field is not equal to zero, my element .pm-container is not added back into my page.

Any idea why?

Thanks for any help.

Answer 1

First create a variable for your Clone .pm-container outside ajax function

Note*: When you use .remove() you cannot take it back.

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

then inside your ajax function

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

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

Answer 2

When you remove the element, it is gone. there is no way to get it back. one solution is to clone the element into a variable and be able to re-use it later:

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

However, for your case, Best way could be hiding and showing back the element:

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