Keep variable value after removing values from HTML element

Question

I am using tagsinput bootstrap library and have stored tagsinput values into the variable oldListValues. After I execute this method

$('#tagsinput').tagsinput( 'removeAll' );

oldListValues variable becomes empty.

Is there any way to keep values in the variable after executing this tagsinput method than to clone this element and then use values from cloned element?

This is the part of code that I am using:

if ( $('#tagsinput').tagsinput('items').length > 0 ) {

    $('#modal').modal('show');

    $('#button').click( function(e) {

        var oldListValues = $('#tagsinput').tagsinput('items');
        var mergedValues = $.merge( oldListValues, distValues );

        $('#tagsinput').tagsinput( 'removeAll' );
        $('#tagsinput').tagsinput( 'add', mergedValues.join('|') );

    });

}

Answer 1

Try this

var oldListValues = $.extend([], $('#tagsinput').tagsinput('items')); 

This will clone the tagsinput output into a new array, rather than using a reference.

Depending on your browser requirements, you could also do this:

var oldListValues = [...$('#tagsinput').tagsinput('items')]

(not supported in IE < edge)

Edit: Here's a fiddle to demonstrate: https://jsfiddle.net/jakelauer/tfgk87g3/