Question

我在删除不包含其内容的div时遇到问题。我有这个html结构：

<div id="mainWrap">
  <div class="wrap">
      <div class="test">Menu 1</div>
      <div class="test">Menu 2</div>
  </div>
  <div class="test">Menu 3</div>
  <div class="test">Menu 4</div>
</div>

我需要删除包含“ wrap”类的div。我希望这样的结构，只是没有“换行”：

<div id="mainWrap">
  <div class="test">Menu 1</div>
  <div class="test">Menu 2</div>
  <div class="test">Menu 3</div>
  <div class="test">Menu 4</div>
</div>

我尝试了这个jQuery：

$("button").click(function () {
$(".test").not().siblings().unwrap();
});

并与此：

var content = $(".wrap").html();
$(".wrap").remove();
$("body").append(content);

第二个我到达目标，但我失去了DOM顺序。我该如何解决？

Answer 1

$(".wrap .test").unwrap('.wrap');

.wrap {background: red;}

<div id="mainWrap">
  <div class="wrap">
      <div class="test">Menu 1</div>
      <div class="test">Menu 2</div>
  </div>
  <div class="test">Menu 3</div>
  <div class="test">Menu 4</div>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://api.jquery.com/unwrap/通过使用匹配的父选择器

Answer 2

$(document).ready(function(){
  var w = $('.wrap').html();
  $('.wrap').remove();
  $('#mainWrap').prepend(w);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="mainWrap">
  <div class="wrap">
      <div class="test">Menu 1</div>
      <div class="test">Menu 2</div>
  </div>
  <div class="test">Menu 3</div>
  <div class="test">Menu 4</div>
</div>

如何删除没有内容的div

2 个答案: