成年视频在线观看,免费精品国产自产拍观看,国产一卡二卡四卡无卡六卡七卡在线

技術(shù)頻道 - js技術(shù)

jQuery移除某class的div標(biāo)簽，但保留內(nèi)容文字

作者:admin 時(shí)間:2024-7-7 13:49:58 瀏覽:

當(dāng)我們要用jQuery操作HTML，想移除某class的div標(biāo)簽，但保留內(nèi)容文字。例如原HTML代碼如下：

<body>
  <div class="div1">
    <div class="div2">這是一個(gè)測(cè)試示例</div>
  </div>
</body>

現(xiàn)在要把上述代碼class="div2"的div標(biāo)簽刪掉，只保留內(nèi)容文字。想要的結(jié)果如下：

<body>
  <div class="div1">
    這是一個(gè)測(cè)試示例
  </div>
</body>

我們?cè)撊绾螌慾Query實(shí)現(xiàn)呢？下面是實(shí)現(xiàn)代碼：

$('div.div2').each(function() {
  // 提取內(nèi)容
  var contents = $(this).html();
  // 將內(nèi)容插入到當(dāng)前位置（即div1的父元素）
  $(this).parent().append(contents);
  // 移除原來的div標(biāo)簽
  $(this).remove();
});

下面是一個(gè)完整示例

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">這是一個(gè)測(cè)試示例</div>
  </div>
  <p>
    <input type=button value="提取內(nèi)容" 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() {
      // 提取內(nèi)容
       var contents = $(this).html();
      // 將內(nèi)容插入到當(dāng)前位置（即div1的父元素）
       $(this).parent().append(contents);
      // 移除原來的div標(biāo)簽
       $(this).remove();
    });
  }
  function myfunc2(){
    var contents = $('div.div1').html();
    var htmlContents = "<div class='div2'>" + contents + "</div>";
    $('div.div1').html(htmlContents);
  }
  </script>
</body>

</html>