CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Liam Sorsby
Liam Sorsby

Reputation: 2982

Jquery Remove doesn't entirely remove the element

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.

Upvotes: 0

Views: 73

Answers (1)

adeneo
adeneo

Reputation: 318202

append() moves the element, you don't have to remove() it at all

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

Upvotes: 3

Related Questions