jQuery - Wrap elements and Remove elements

In this tutorial we will learn to manipulate DOM by adding new elements around existing elements and removing existing elements using jQuery.

We can add new elements around existing elements by using the following methods.

wrap()

We use the wrap() method to wrap an existing element with new elements.

In the following example we are going to wrap a paragraph having id "sample-p1" with a div.

HTML

<p id="sample-p1">Para 1</p>

jQuery

$("#sample-p1").wrap("<div></div>");

Output

<div>
  <p id="sample-p1">Para 1</p>
</div>

We can also add attributes to the wrapping element.

HTML

<p id="sample-p1">Para 1</p>

jQuery

$("#sample-p1").wrap( $("<div />", {
  "id" : "sample-div1",
  "class" : "container"
}));

Output

<div id="sample-div1" class="container">
  <p id="sample-p1">Para 1</p>
</div>

wrapAll()

If we want to wrap multiple elements then we use the wrapAll() method.

In the following example we are going to wrap all the paragraphs having class "sample-p" with a div.

HTML

<p class="sample-p">Para 1</p>
<p class="sample-p">Para 2</p>
<p class="sample-p">Para 3</p>

jQuery

$(".sample-p").wrapAll("<div></div>");

Output

<div>
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

We can also add attributes to the wrapping element.

HTML

<p class="sample-p">Para 1</p>
<p class="sample-p">Para 2</p>
<p class="sample-p">Para 3</p>

jQuery

$(".sample-p").wrapAll( $("<div />", {
  "id" : "sample-div1",
  "class" : "container"
}));

Output

<div id="sample-div1" class="container">
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

wrapInner()

We use the wrapInner() method to wrap the inner content of any element.

In the following example we are going to wrap the inner content of a paragraph having id "sample-p1".

HTML

<p id="sample-p1">Para 1</p>

jQuery

$("#sample-p1").wrapInner("<span></span>");

Output

<p id="sample-p1">
  <span>Para 1</span>
</p>

We can also add attributes to the inner wrapper element.

HTML

<p class="sample-p">Para 1</p>
<p class="sample-p">Para 2</p>
<p class="sample-p">Para 3</p>

jQuery

$(".sample-p").wrapInner( $("<span />", {
  "class" : "sample-span"
}));

Output

<p class="sample-p">
  <span class="sample-span">Para 1</span>
</p>
<p class="sample-p">
  <span class="sample-span">Para 2</span>
</p>
<p class="sample-p">
  <span class="sample-span">Para 3</span>
</p>

empty()

We use the empty() method to remove the content of an element.

In the following example we are removing the content of a div having id "sample-div1".

HTML

<div id="sample-div1">
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

jQuery

$("#sample-div1").empty();

Output

<div id="sample-div1">
</div>

remove()

We use the remove() method to remove the element from the page.

In the following example we are removing a div having id "sample-div1" and all of its content.

HTML

<div id="sample-div1">
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

jQuery

$("#sample-div1").remove();

This will remove the div and its content.