Znajdź i usuń konkretny element przy użyciu czystego javascript

Question

Mam skrypt, który generuje następujący kod HTML

<div class='rightbox'> 
<div class'testBox'> 

</div> 


</div> 

teraz mam przycisk, który po naciśnięciu powinien usunąć div class whos jest testbox. Teraz jednak nie zawsze jest tak, że testBox jest pierwszym dzieckiem w ramach rightbox.

Jak mogę to znaleźć i usunąć? a następnie sprawdzić, czy jest obecny jako dziecko w ramach rightbox?

Answer 1

Użyj np. querySelector(), aby znaleźć swój element, a następnie kombinację parentNode i removeChild(), aby go usunąć.

var el = document.querySelector('.testBox'); 
el.parentNode.removeChild(el); 

Example Fiddle

Answer 2

Spróbuj

$(".rightBox").find("div").eq(0).remove(); 
$(".rightBox").find("div.testBox").remove(); 

Uwaga: To jest realizowany przy użyciu jQuery

Answer 3

var testBoxes = Array.prototype.slice.call(document.querySelectorAll('.testBox')); 

testBoxes.forEach(function(testBox) { 
    testBox.parentNode.removeChild(testBox); 
}); 

Answer 4

var els = document.getElementsByTagName("div"); 
var el; 
for(var i = 0, ceiling = els.length; i < ceiling; i++) { 
    el = els[i]; 
    if(el.className == "testbox") { 
     el.parentNode.removeChild(el); 
     break; 
    } 
} 

var presentAsChildWithinRightbox = false; 
for(var i = 0, ceiling = els.length; i < ceiling; i++) { 
    el = els[i]; 
    if(el.className == "rightbox") { 
     var childNodes = el.childNodes; 
     for(var j = 0, ceiling2 = childNodes.length; j < ceiling2; j++) { 
      if(childNodes[j].className == "testbox") { 
       presentAsChildWithinRightbox = true; 
       j = ceiling2; 
       i = ceiling; 
      } 
     } 
    } 
} 
if(presentAsChildWithinRightbox) 
    alert("A div with classname childbox has a child div with classname testbox"); 
else 
    alert("A div with classname childbox does not have a child div with classname testbox");