1

画像やスタイルなどを含む HTML を含む DIV があります。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 に答える