1

我需要获取所有具有“显示：无”样式的 div 元素，然后删除所有这些元素。我还需要选择包含在#somecontainer 元素中的那些div。必须在 RAW javascript 中完成。任何的想法？

示例 html：

    <table id="listtabletemp">
    <thead>
        <tr id="theader">
            <td id="theaderleft">loolz</td>
        </tr>
    </thead>
    <tbody>
        <tr class="" rel="13117025">
            <td><div><style>
.ikthgjyhtr{display:none}
.tVOx{display:inline}
</style>
                <div style="display:none">crap here</div>
                <div></div>
                <div></div>
                <div style="display:none">crap here</div>
                <div class="230">something good</div>
                <div class="ikthgjyhtr">crap here</div>
                <div style="display:none">crap here</div>
                <div class="ikthgjyhtr">crap here</div>
                <div style="display: inline">something good</div>something good
                <div style="display: inline">something good</div>
                <div class="21">something good</div>
                <div style="display:none">crap here</div>
                <div style="display:none">crap here</div>
                <div style="display:none">crap here</div>
                <div class="4">something good</div>
                <div class="224">something good</div></div>
            </td>
        </tr>
    </tbody>
</table>
4

3 回答 3

3

很简单，DOM 是你的朋友：

function removeDivs() {
    var container = document.getElementById("somecontainer");
    var divs = container.getElementsByTagName("div");
    var empty = [];
    var getStyle = function(obj, css){
        var style = null;
        if(obj.currentStyle) {
            style = obj.currentStyle[css];
        } else if(window.getComputedStyle) {
            style = window.getComputedStyle(obj, null).getPropertyValue(css);
        }
        return(style);
    };
    for(var i = 0, len = divs.length; i < len; i++) {
        var div = divs[i];
        if(div && ((div.style.display && div.style.display == "none") || getStyle(div, "display") == "none")) {
            empty.push(div);
        }
    }
    for(var i = 0, len = empty.length; i < len; i++) {
        var div = empty[i];
        div.parentNode.removeChild(div);
    }
}
于 2013-03-22T02:57:11.590 回答
0

快速而肮脏，这里有一些可以帮助您入门的东西：

http://jsfiddle.net/kttsJ/

var parent = document.getElementById('parent');
var items = parent.getElementsByTagName('DIV');
var hidden = [];
for (var i in items){
    if ((items[i]).getAttribute !== undefined){
        if ((items[i]).hasAttribute('style')){
            if ((/display\:\s*none/gi).test(items[i].getAttribute('style'))){
                hidden.push(items[i]);
            }
        }
    }
}

for (var i in hidden){
    hidden[i].parentNode.removeChild(hidden[i]);
}
于 2013-03-22T03:13:37.703 回答
0

这将删除具有“显示：无”样式的 div。我在 OP 的示例中对其进行了测试。注意：我在测试时添加了一个“some-container”id。

function removeDivs() {
    "use strict";

    //Some container.
    const someContainer = document.getElementById("some-container");

    //Divs inside it.
    const divsInside = someContainer.querySelectorAll("div");

    //Loop, remove div if "display: none".
    divsInside.forEach(function (divInside) {
        const style = window.getComputedStyle(divInside);
        if (style.display === "none") {
            someContainer.removeChild(divInside);
        }
    });
}

removeDivs();
于 2020-12-26T19:04:25.433 回答