javascript - 从 JavaScript DOM 中的父节点拆分节点

Question

我有这样的 DOM HTML

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

我想从 div“width_medium”中移除 div 类“video”。结果会这样

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

我如何使用 jQuery 做到这一点？

Answer 1

$(".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. 展开元素。
2. 使用.prevAll() 和.nextAll() 和.wrapAll() 包装所有prev 和next p
3. 对类(class)视频使用.wrap()

更新

首先不要解包按照前面的步骤，然后将 .parent() 添加到 .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>")
$(".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>