jQuery replaceWith not keeping the link to the element in the DOM?

Question

var el = $(this); // it's a form

At some point:

el.replaceWith('<p>Loading...</p>');

Later:

el.replaceWith(output);

Apparently el doesn't exist anymore after the first replaceWith...

Can I keep somehow el, obviously with the new content ?

Answer 1

The original el has been removed and replaced by replaceWith. Create a new reference, using the return value of replaceWith:

var el = $(this); // it's a form
el = el.replaceWith('<p>Loading...</p>');
              //`el.replaceWith()` returns the new element
el = el.replaceWith(output);

If you intended to replace the inner content with the new element, while keeping the form, use:

el.html(""); //Clear html
el.append('<p>Loading...</p>');

Answer 2

jquery's replaceWith returns the replaced element, not the new one

http://api.jquery.com/replaceAll/

you should do something like this:

var el = $(this); // it's a form
var $p = $('<p>Loading...</p>');

el.replaceWith($p);

// now el is unhooked from the dom, that is el.parent() === []
// it is $p who is now hooked, check with $p.parent() === (some node)

//so you should reassing it
el = $p;

// later on

el.replaceWith(output); // but remenber, once again el is unhooked

also, make sure to check this question: https://stackoverflow.com/a/892915/47633