删除没有内部内容Javascript的内部html标签

Question

删除没有内部内容Javascript的内部html标签。 我有类似的HTML结构，具有未定义的div计数：

 <div>
    <div>
      <div>
        <div>~Content 1~</div>
    </div>
  </div>
</div>

如何删除所有div标签，结果必须是：

<div>~Content 1~</div>

Answer 1

尝试

$("div").first().each( function(){ $(this).html( $(this).text() ) });

首先进行div，然后将其innerHTML替换为innerText

演示版

 $("div").first().each(function() { $(this).html($(this).text()) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <div> <div>~Content 1~</div> </div> </div> </div> 

您可以在内容上检查元素，以检查是否仅剩余一个div。

Answer 2

您可以使用unwrap()获取最后一个子div，删除父div，然后将该div附加到body 。

 var div = $('div:not(:has(div))').unwrap() $('div').remove(); $('body').append(div) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <div> <div>~Content 1~</div> </div> </div> </div> 

Answer 3

在Vanilla中，使用document.querySelectorAll

 var divs = document.querySelectorAll("div"); //just check all divs, if the length of children is 0. there are no more descendants. Array.prototype.forEach.call(divs, function(element){ if (element.querySelectorAll("div").length == 0) { //only for demo purposes. the element found is the last descendant. document.querySelector(".result").textContent += element.outerHTML; } }); 

 <div> <div> <div> <div>~Content 1~</div> <div>~Content 2~</div> <div>~Content 3~</div> </div> </div> </div> <pre class="result"></pre>