Entfernen Sie den Elternknoten in JavaScript, beginnend mit einer Zeichenfolge

Question

Ich muss eine Zeichenfolge analysieren. Der String ist ein Rückruf von einem Adserver, und das ist das Format

<div style="background-color: yellow"> 
<div> 
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div> 
</div> 
</div> 

Ich brauche nur das übergeordnete div zu entfernen, wenn er Stil als Hintergrundfarbe gelb hat. Natürlich kann ich jQuery nicht verwenden.

Ich versuche, die Zeichenfolge in einem HTML-Fragmente zu verwandeln

var div = document.createElement('div'); 
div.innerHTML = a.response.html; 
var elements = div.childNodes; 

verwenden, aber ich kann keine Möglichkeit zu überprüfen, auf das Vorhandensein des Attributs und wenn sie wahr ist, entfernen Sie den übergeordneten Knoten hält die Childs finden.

Answer 1

Die div selbst sollte kein Problem sein, so dass Sie nur den Hintergrund transparent einstellen kann, wenn seine ursprüngliche Hintergrundfarbe ist gelb:

var s = `<div style="background-color: yellow"> 
<div> 
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div> 
</div> 
</div>` 
var div = document.createElement('div'); 
div.innerHTML = s; // replace with response... 
if (div.childNodes[0].style.backgroundColor == 'yellow') div.childNodes[0].style.backgroundColor = 'transparent' 
document.body.appendChild(div); 

Here's a fiddle

Answer 2

Sie über die childnodes laufen kann und Überprüfen Sie, ob das div einen bestimmten Stil hat.

function checkandAppend(nodes) { 
 

 
    
 
    for(node in nodes){ 
 
    if (nodes.hasOwnProperty(node)) 
 
    if(nodes[node].getAttribute("style") == 'background-color: yellow') 
 
    { 
 
    
 
     if(nodes[node].childNodes[0].nodeType == 3) // some browser interpret line break as first child 
 
     document.querySelector("body").appendChild(nodes[node].childNodes[1]); 
 
     else 
 
     document.querySelector("body").appendChild(nodes[node].childNodes[0]); 
 
    } 
 
    else 
 
    { 
 
     document.querySelector("body").appendChild(nodes[node]); 
 
    } 
 
    } 
 
    
 
} 
 

 

 
var div = document.createElement('div'); 
 
div.innerHTML = '<div style="background-color: yellow"> <div> <div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"> <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe> </div> </div> </div>' 
 

 
checkandAppend(div.childNodes);

Answer 3

Da der Stil Inline eingestellt ist, können Sie einfach den Stil-Eigenschaft des div lesen. Erstellen Sie ein Div, fügen Sie den HTML-Code ein und überprüfen Sie dann das erste Div. Ich nehme an, dass Sie dies in das Dokument einfügen möchten. Wenn also das erste div auf gelb gesetzt wurde, fügen Sie seinen ersten div Kindknoten (d. H. Den zweiten in der Baumstruktur) in das Dokument ein. Andernfalls fügen Sie das erste div ein.

Diese Methode ist nicht robust, aber ohne weitere Informationen darüber, wie Sie das div auswählen oder was damit zu tun ist, können Sie nicht mehr tun.

Ich habe den iFrame mit etwas Text ersetzt, ich glaube nicht, dass es für die Antwort relevant ist.

var response = '<div style="background-color: yellow"><div><div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;">iframe</div></div></div>'; 
 

 
var div = document.createElement('div'); 
 
div.innerHTML = response; 
 
var divs = div.getElementsByTagName('div'); 
 

 
if (divs[0].style.backgroundColor == 'yellow') { 
 
    document.body.appendChild(divs[1]); 
 
} else { 
 
    document.body.appendChild(divs[0]); 
 
}

Sie die if..else mit ersetzen könnte:

document.body.appendChild(divs[+(divs[0].style.backgroundColor == 'yellow')]); 

aber das könnte sein etwas verschleiert.