CODEWITHSUNDEEP
javascriptjqueryhtmldom
Duc Pham The
Duc Pham The

Reputation: 33

Splitting node from parent node in JavaScript DOM

I have DOM HTML like this

<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

And I want move away div class "video" from div "width_medium". Result will like this

<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
</div>
<div class="width_medium">
  <div class="video">Video</div>
</div>
<div class="width_medium">
  <p>Text 3</p>
  <p>Text 4</p>
</div>

How can I do that with jQuery?

Upvotes: 2

Views: 148

Answers (1)

guradio
guradio

Reputation: 15555

$(".video").unwrap();
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
.width_medium p {
  background-color: blue
}

.width_medium .video {
  background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

  1. Unwrap the elements.
  2. Use .prevAll() and .nextAll() and .wrapAll() to wrapp all prev and next p
  3. Use .wrap() for the class video

UPDATE

Dont unwrap at first follow previous step then add .parent() to .video then use unwrap()

$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
$(".video").parent().unwrap();
.width_medium p {
  background-color: blue
}

.width_medium .video {
  background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

Upvotes: 2

Related Questions