1

我有一些 DIV，其中包含带有图像、样式等的 HTML 我想删除包含 id = 'quot' 或 className = 'quote' 的确切 div，但我不明白如何不仅可以获得每个标签的 innerHTML。例如，没有innerHTML 的<p> 和</p> 也应该包含在最终解析的HTML 中。

var bodytext = document.getElementById("div_text");
var NewText = "";

if (bodytext.hasChildNodes){

    var children = bodytext.childNodes;        
    for (var i = 0; i < children.length; i++){
        if (children[i].id != "quot" && children[i].className != "quote" && children[i].innerText != ""){
            NewText = NewText + children[i].innerHTML;
        }            
 }

需要解析源的HTML：

<div id="div_text">
    <p>
        Some Text</p>
    <p>
        Some Text</p>
    <p>
        <img alt="" src="localhost/i/1.png" /></p>
    <div id="quot" class="quote" />
        any text <div>text of inside div</div> 
        <table><tr><td>there can be table</td></tr></table>
    </div>

    <p>
        &nbsp;</p>
</div>

期望的输出：

    <p>
        Some Text</p>
    <p>
        Some Text</p>
    <p>
        <img alt="" src="localhost/i/1.png" /></p>        
    <p>
        &nbsp;</p>
4

1 回答 1

1

只需获取对目标 div 的引用并将它们从各自的父级中删除即可。

也许有点像这样？

编辑：添加代码以对克隆执行操作，而不是文档本身。div 元素没有 .getElementById 方法，所以我们手动搜索元素。

window.addEventListener('load', myInit, false);


function removeFromDocument()
{
    // 1. take car of the element with id='quot'
    var tgt = document.getElementById('quot');
    var parentNode = tgt.parentNode;
    parentNode.removeChild(tgt);

    // 2. take care of elements whose class == 'quote'
    var tgtList = document.getElementsByClassName('quote');
    var i, n = tgtList.length;
    for (i=0; i<n; i++)
    {
        // we really should be checking to ensure that there aren't nested instances of matching divs
        // The following would present a problem - <div class='quote'>outer<div class='quote'>inner</div></div>
        // since the first iteration of the loop would also remove the second element in the target list,
        parentNode = tgtList[i].parentNode;
        parentNode.removeChild(tgtList[i]);
    }

    // 3. remove the containing div
    var container = document.getElementById('div_text');
    container.outerHTML = container.innerHTML;
}

function cloneAndProcess()
{
    var clonedCopy = document.getElementById('div_text').cloneNode(true);

    var tgt;// = clonedCopy.getElementById('quot');
    var i, n = clonedCopy.childNodes.length;
    for (i=0; i<n; i++)
    {
        if (clonedCopy.childNodes[i].id == 'quot')
        {
            tgt = clonedCopy.childNodes[i];
            var parentNode = tgt.parentNode;
            parentNode.removeChild(tgt);
            break;      // done with for loop - can only have 1 element with any given id
        }
    }

    // 2. take care of elements whose class == 'quote'
    var tgtList = clonedCopy.getElementsByClassName('quote');
    var i, n = tgtList.length;
    for (i=0; i<n; i++)
    {
        // we really should be checking to ensure that there aren't nested instances of matching divs
        // The following would present a problem - <div class='quote'>outer<div class='quote'>inner</div></div>
        // since the first iteration of the loop would also remove the second element in the target list,
        parentNode = tgtList[i].parentNode;
        parentNode.removeChild(tgtList[i]);
    }

    // 3. remove the containing div
    //var container = clonedCopy;   //.getElementById('div_text');
    //container.outerHTML = container.innerHTML;
    console.log(clonedCopy.innerHTML);
}


function myInit()
{
    cloneAndProcess();
    //removeFromDocument();
}
于 2013-10-29T03:13:48.793 回答