如何删除产生的内容为空的节点 - 调试易

如何删除产生的内容为空的节点

<div id="test">
<p><span> </span> xxx </p> // 要求把: span 空标签去掉
<p> <span>xxx <i></i></span> <b></b></p> // 要求把: i b 空标签去掉
</div>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script type="text/javascript">
window.onload = function(){
var _div = document.getElementById('test');
var temp = _div.innerHTML.replace(/<span>[\s]*?<\/span>/ , '');
temp = temp.replace(/<([ib])><\/\1>/g,'');
_div.innerHTML = temp;
}
</script>
<div id="test">
<p><span>  </span> xxx </p>
<p> <span>xxx <i></i></span> <b></b></p>
</div>
<script type="text/javascript">
var $= function (id) {
return document.getElementById(id);
} var removeElement= function (el){
if(el && el.parentNode){
el.parentNode.removeChild(el);
}
}
    window.onload = function(){
        var _div = $('test');
var all = _div.getElementsByTagName("*");
var needRemove=[];
for(var i=0,max=all.length;i<max;i++){
var node = all[i];
console.log(node);
if(node && node.nodeType==1 && node.innerHTML.trim()==""){
needRemove.push(node);
}
}
for(var i=0,max=needRemove.length;i<max;i++){
removeElement(needRemove[i]);
}
    }
</script>
<div id="test">
<p><span>  </span> xxx </p>
<p> <span>xxx <i></i></span> <b></b></p>
</div>
<script type="text/javascript">
var $= function (id) {
return document.getElementById(id);
} var removeElement= function (el){
if(el && el.parentNode){
el.parentNode.removeChild(el);
}
}
    window.onload = function(){
        var _div = $('test');
var all = _div.getElementsByTagName("*");
all = Array.slice(all);
for(var i=0,max=all.length;i<max;i++){
var node = all[i];
if(node && node.nodeType==1 && node.innerHTML.trim()==""){
removeElement(node);
}
}

    }
</script>
<div id="test">
<p><span>  </span> xxx </p>
<p> <span>xxx <i></i></span> <b></b></p>
</div>
请问jquery 有这样的实现方法么?
不是 window.onload
div test 需要动态清除
不是 window.onload
是 click 事件
div test 需要动态清除<button>click</button>
div test  动态清除  内容为空的所有子节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<SCRIPT type="text/javascript">
$().ready(function(){
console.log($("#test"));
console.log($("#test *")); $("#test *").each(function(index,node){
if(node.nodeType==1 && node.innerHTML.trim()==""){
              $(node).detach();
         }
});
;});
</SCRIPT>
</head>
<body><div id="test">
<p><span>  </span> xxx </p> // 要求把:   span 空标签去掉
<p> <span>xxx <i></i></span> <b></b></p>  // 要求把: i  b 空标签去掉
</div></body></html>onload 和onclick区别你自己处理吧。