javascript - 如何删除没有内容的div

<分区>

我在删除没有内容的 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 顺序。我该如何解决？

最佳答案

$(".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/通过使用匹配的父选择器

关于javascript - 如何删除没有内容的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52084159/

上一篇：javascript - Chrome : Can you print out a stack trace that's minimized?

下一篇：javascript - 使用多个异步/等待调用构建对象

相关文章：

Javascript html |如何正确排序我的语言<select>？

javascript - jquery中使用列设置表的顺序

node.js - 使用带有 node.js 的 jquery AJAX，处理来自服务器的响应

javascript - jQuery CSS 渲染 - 适用于 Firefox，不适用于 Chrome

javascript - 在React的useEffect()中获取数据返回 "undefined"

javascript - node.js 中的命名空间导入

javascript - 如何在 Node 模块中保存用户特定的配置？

javascript - 滚动时添加不透明度类，但返回顶部时删除

jquery - float 并排堆栈栏

javascript - 遍历 div 内的输入