jQuery删除内容为空的元素

Question

我想删除没有内容的元素.例如,这是我的HTML标记:

我在jquery变量中有html标记说var myhtml,我不确定其中是否有任何特定的标签.

<h1>
    <u>
        <strong></strong>
    </u>
    <u>
        <strong>Read This Report Now
            <strong></strong> ??
        </strong>
    </u>
</h1>

我们可以看到上面的标记

<u>
    <strong></strong>
</u>

是空的,因此应该从标记中删除.假设我在变量中有上述标记myhtml.我怎样才能做到这一点？

我不确定该元素是否也是

"<u>" or "<em>" or "<i>" or "<div>" or "<span>"

..它可以是任何东西.

Answer 1

您可以搜索所有元素并删除哪些元素为空.

$('*').each(function(){ // For each element
    if( $(this).text().trim() === '' )
        $(this).remove(); // if it is empty, it removes it
});

看看有多有用!:http://jsfiddle.net/qtvjj3oL/

更新:

你也可以不用jQuery:

var elements = document.getElementsByTagName("*");

for (var i = 0; i < elements.length; i++) {
    if( elements[i].textContent.trim() === '' )
        elements[i].parentNode.removeChild(elements[i]);
}

见jsfiddle:http://jsfiddle.net/qtvjj3oL/1/

更新2:

根据你的评论,你有一个变量中的html,你可以这样做:

// the html variable is the string wich contains the html
// We make a fake html
var newHtml = document.createElement('html');
var frag = document.createDocumentFragment();
newHtml.innerHTML = html;
frag.appendChild(newHtml);

var elements = newHtml.getElementsByTagName("*");

// Remove the emptys elements
for (var i = 0; i < elements.length; i++) {
    if( elements[i].textContent.trim() === '' )
        elements[i].parentNode.removeChild(elements[i]);
}

html = newHtml.innerHTML; // now reset html variable

它有效:http://jsfiddle.net/qtvjj3oL/6/

Answer 2

尝试

 $("u").each(function () {      // if remove all, you can select all element $("*")           
    var x = $(this).text().trim();
    if (x == "") {
        $(this).remove();
    }
});

如果您想删除所有内容,只需使用空 选择器然后将其删除即可

DEMO