Jquery Remove не полностью удаляет элемент

На основе документации Jquery.remove удалит элемент и вложенные элементы html внутри родительского тега.

Использование примера JQuery

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

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

дам

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

Однако, возможно, я делаю это неправильно, но мне нужно использовать jquery для перемещения элемента.

Если я сделаю следующее:

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

Это сделает копию контейнера, включая родительский элемент, удалит html-элементы, а затем добавит.test с данными. Если я затем попытаюсь добавить элемент после текстового поля, как это:

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

Вместо того, чтобы применять этот абзац к текстовой области, которая оставлена, она применяет его к тому, где должна быть оригинальная текстовая область, а также к новой текстовой области.

Кто-нибудь знает, связано ли это с тем, как я это сделал или если есть способ?

Заранее благодарю за ваше время.