jQuery Remove不能完全删除元素

Question

Based on the Jquery documentation .remove will remove the element and nested html elements inside the parent tag.

Using the Jquery example

<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>

$( ".hello" ).remove();

will give

<div class="container">
<div class="goodbye">Goodbye</div>
</div>

However, I maybe doing this incorrectly but i need to use jquery to move an element.

If i do the following:

<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
<textarea></textarea>
</div>
<div class="test"></div>

var container = $(".container")[0].outerHTML;
$(".container").remove();
$(".test").append(container);

This will make a copy of the container including the parent element, remove the html elements and then append .test with the data. If i then try to add an element after the textarea like this:

$("textarea").after("<p>abc123</p>");

Instead of applying the paragraph to the textarea that is left it applies it to where the original textarea should be and also to the new textarea.

Does anyone know if this is due to the way i have done this or if there is a way around?

Thank you in advance for your time.

Answer 1

append()移动元素，而您根本无需remove()

$(".test").append($(".container"));