JavaScript函数与document.querySelectorAll加上过滤器（）不能正常工作

Question

我想摆脱那些<tr>与<span class="verfied-badge">里面使用JavaScript。 （请注意，我希望有一个解决方案，不仅是JavaScript的，没有的jQuery）

的HTML结构是这样的：

<tr class="project-description"> 
    <td colspan="6"> 
    <div class="project-desc-inner"> 
     <div class="project-synopsis"> 
     <p class="trunk8">This is an entry</p> 
     </div> 
     <div class="project-verification"> 
     <span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN 
      <span class="currency-symbol">$</span> 
      <span class="icon-tick"></span> 
      Verified 
     </span> 
     </div> 
     <div class="project-actions"> 
     <a href="#"> 
      <button class="btn">LOL</button> 
     </a> 
     </div> 
    </div> 
    </td> 
</tr> 

这是据我可以拿出来：

function showAlert() 
{ 
    document.querySelectorAll("tr.project-description").filter(document.getElementsByClassName("verfied-badge")).remove(); 
    alert("Unwanted removed."); 
} 

我希望它是，选择所有tr.project-description然后从那些让所有有span.verfied-badge，如果它确实有它，删除整个tr

，但因为它看起来，我一直失败:(

希望有人可以提供帮助。

谢谢！

Answer 1

查找您关心的所有tr元素，然后查看它们是否包含匹配的verified-badge范围。如果他们这样做， burninate删除它们。

window.addEventListener('load', function() { 
    var projectDescriptions = document.querySelectorAll('tr.project-description'), 
     projectDescriptions = Array.prototype.slice.call(projectDescriptions); 
    projectDescriptions.forEach(function(el) { 
     if (el.querySelector('span.verfied-badge')) { 
      el.parentNode.removeChild(el); 
     } 
    }); 
}); 

我叫Array.prototype.slice从querySelectorAll返回NodeList因为querySelectorAll不返回数组，但一个NodeList，这是JavaScript的刺激性之一（但很容易解决方法）“阵列状物体”。