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=="&nbsp;"){
   ap.remove();
}

似乎我找不到“空”的div。我怎样才能正确找到并删除整个div？

see fiddle here

Answer 1

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

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

你的小提琴应该看起来像this

Answer 2

textContent将包括所有文本节点，即表中的空格。请尝试以下方法：

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

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

http://jsfiddle.net/kQq5b/1/

分叉小提琴

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(/&nbsp;/gi, '');
content = content.replace(/\s/g,'');
console.log('Content: "' + content + '"');
if(!content.length){
   ap.parentNode.removeChild(ap);
}

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

删除包含指定内容的元素

3 个答案: