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

使用document.querySelectorAll

在Vanilla中

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>

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

3 个答案: