javascript - 移除包含指定内容的元素

Question

我有多个包含表格的 div，其中一个是这样的：

<div id="apple">
    <table width="30%" height="2%" cellpadding="0" border="0px" align="left" >                  
        <tbody>
            <tr>
            <td style="text-align:center"><font face="Arial">&nbsp;</font></td>
            </tr>
        </tbody>
    </table>
</div>

显然它看起来是空的，但在 HTML 中占据了一个段落。所以我应用了 JavaScript 来删除表格。

var ap = document.getElementById("apple")
if(ap.textContent==" " || ap.textContent==" "){
   ap.remove();
}

似乎我没能找到“空”的 div。如何正确找到并删除整个 div？

在这里看小提琴

Answer 1

将textContent包括所有文本节点，表格中的空白。尝试以下操作：

var ap = document.getElementById("apple");
if (!ap.textContent.trim()) {
    ap.parentNode.removeChild (ap);
}

被 转换为空格，textContent因此无需对其进行测试。

在http://jsfiddle.net/kQq5b/1/分叉小提琴

Answer 2

您不能调用.remove()DOM 元素，我认为您div错误地使用了未定义的变量。尝试：

var ap = document.getElementById("apple")
if(ap.textContent==" " || ap.textContent==" ") { //change div for ap
   //go to the parent and remove the element
   ap.parentNode.removeChild(ap); 
}

你的小提琴应该看起来像这样

Answer 3

根据您的小提琴，这是您的问题的解决方案：

<div id="apple">
    <table width="30%" height="2%" cellpadding="0" border="0px" align="left" >                  
        <tbody>
            <tr>
            <td style="text-align:center"><font face="Arial">&nbsp;</font></td>
            </tr>
        </tbody>
    </table>
</div>

和JS：

var ap = document.getElementById("apple")
var content = ap.textContent;
content = content.replace(/ /gi, '');
content = content.replace(/\s/g,'');
console.log('Content: "' + content + '"');
if(!content.length){
   ap.parentNode.removeChild(ap);
}

工作示例：http: //jsfiddle.net/orlenko/pvWTP/