我想知道如何删除空元素但每个组只允许一个空元素(非空单元旁边)
类似:
示例HTML:
<p>Hello world</p>
<p><br></p>
<p><br></p> <!--This will remove-->
<p><br></p> <!--This will remove-->
<p>Lorem ipsum dolor sit amet</p>
<p><br></p>
<p><br></p> <!--This will remove-->
<p>Eum ne nostro admodum</p>
<p><br></p>
用于检查空元素的jQuery:
var p_empty = $('p').filter(function(i,v){return $.trim($(v).text()).length===0;});
现在我得到了所有空元素,但是任何想法如何删除下一个空元素?
工作流程: http://jsfiddle.net/jmy0uzw1/
PS:我也在寻找良好的JS性能
答案 0 :(得分:7)
在您的情况下,由于您没有使用容器,您必须使用同级选择器+
并确保前面的p
元素本身不属于.empty
$('p.empty:not(p:not(.empty) + p.empty)').remove();
var p_empty = $('p').filter(function(i, v) {
return $.trim($(v).text()).length === 0;
});
p_empty.addClass('empty');
$('p.empty:not(p:not(.empty) + p.empty)').remove();
p {
padding: 3px 10px;
background: #eee;
color: #999;
font-size: 12px;
line-height: 12px;
}
p.empty {
border: 1px dashed #fff;
background: #edd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p>Hello world</p>
<p>
<br>
</p>
<p>
<br>
</p>
<p>
<br>
</p>
<p>Lorem ipsum dolor sit amet</p>
<p>
<br>
</p>
<p>
<br>
</p>
<p>Eum ne nostro admodum</p>
<p>
<br>
</p>
答案 1 :(得分:2)
p {
padding: 3px 10px;
background: #eee;
color: #999;
font-size: 12px;
line-height: 12px;
}
p.empty {
border: 1px dashed #fff;
background: #edd;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello world</p>
<p>
<br>
</p>
<p>
<br>
</p>
<p>
<br>
</p>
<p>Lorem ipsum dolor sit amet</p>
<p>
<br>
</p>
<p>
<br>
</p>
<p>Eum ne nostro admodum</p>
<p>
<br>
</p>
&#13;
$('p.empty + p.empty').remove();
&#13;
试试这个:
var p_empty = $('p').filter(function(i, v) {
return $.trim($(v).text()).length === 0;
});
p_empty.addClass('empty');
$('p.empty + p.empty').remove();
完整代码
{{1}}
答案 2 :(得分:0)
只需在滤镜中添加更多内容
即可var p_empty = $('p').filter(function(i,v){
return $.trim($(v).text()).length===0 && $.trim($(v).prev().text()).length===0;
});