jQuery移除某class的div标签，但保留内容文字

赞助商

分类目录

赞助商

最新文章

jQuery移除某class的div标签，但保留内容文字

本文介绍我们要用jQuery操作HTML，移除某class的div标签，但保留内...

一例看懂 * + ? 符号正则匹配内容的不同

在书写正则表达式时，* + ? 符号非常常见，但是它们又比较容易混淆。本文将用一...

纯JS+CSS实现：可移动显示的图片背景

本文我将给大家介绍如何用JS+CSS来实现可移动显示的图片背景效果。

纯JS实现：图片放大镜效果

在一些商品展示的网页里，我们经常看到图片放大的效果。本文就给大家介绍一下，如何用...

js/jquery：5行代码实现点击按钮复制文字到剪贴板

本文介绍如何分别使用JS和jQuery两种方法来实现点击按钮复制文字到剪贴板，只...

使用jquery-resizable创建可调整大小的表(table)列

本文介绍如何使用jquery-resizable调整表格(table)列宽。

使用jquery-resizable插件调整左右/上下窗格大小

本文介绍如何使用jquery-resizable插件调整左右/上下窗格大小。

搜索

技术频道 - js技术

jQuery移除某class的div标签，但保留内容文字

作者:admin 时间:2024-7-7 13:49:58 浏览:355

当我们要用jQuery操作HTML，想移除某class的div标签，但保留内容文字。例如原HTML代码如下：

<body>
  <div class="div1">
    <div class="div2">这是一个测试示例</div>
  </div>
</body>

现在要把上述代码class="div2"的div标签删掉，只保留内容文字。想要的结果如下：

<body>
  <div class="div1">
    这是一个测试示例
  </div>
</body>

我们该如何写jQuery实现呢？下面是实现代码：

$('div.div2').each(function() {
  // 提取内容
  var contents = $(this).html();
  // 将内容插入到当前位置（即div1的父元素）
  $(this).parent().append(contents);
  // 移除原来的div标签
  $(this).remove();
});

下面是一个完整示例

index.html

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
 
<style>
html,
 body {
   margin-top: 50px;  
   margin-left: 50px;  
 }
 .div1{
   background: #999;
   width:300px;
   height:80px;
   padding:15px 15px;
 }
 .div2 {
   background: #ccc;
   width:200px;
   height:50px;
   padding:5px 5px;
 }
 
</style>
 
</head>
 
<body>
  <div class="div1">
    <div class="div2">这是一个测试示例</div>
  </div>
  <p>
    <input type=button value="提取内容" onclick=myfunc()>
    <input type=button value="还原" onclick=myfunc2()>
  </p>
  <script src='jquery-3.2.1.min.js'></script>
  <script>
  function myfunc(){
    $('div.div2').each(function() {
      // 提取内容
       var contents = $(this).html();
      // 将内容插入到当前位置（即div1的父元素）
       $(this).parent().append(contents);
      // 移除原来的div标签
       $(this).remove();
    });
  }
  function myfunc2(){
    var contents = $('div.div1').html();
    var htmlContents = "<div class='div2'>" + contents + "</div>";
    $('div.div1').html(htmlContents);
  }
  </script>
</body>
 
</html>