Tìm và loại bỏ yếu tố cụ thể sử dụng javascript tinh khiết

Question

Tôi có javascript mà tạo ra mã HTML sau

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

</div> 


</div> 

Bây giờ tôi có một nút mà khi ép nên loại bỏ lớp div whos là testbox. Bây giờ mặc dù trong trường hợp này, không phải lúc nào cũng là testBox là đứa trẻ đầu tiên trong số rightbox.

Vậy làm thế nào để tôi tìm và xóa nó? và sau đó kiểm tra nếu nó hiện diện như một đứa trẻ trong số rightbox?

Answer 1

Sử dụng, ví dụ: querySelector() để tìm phần tử của bạn và sau đó kết hợp parentNode và removeChild() để xóa.

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

Example Fiddle

Answer 2

Hãy thử điều này

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

Lưu ý: Đây được thực hiện sử dụng 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");