javascript函数与document.querySelectorAll加filter(）可以'工作不正常

javascript function with document.querySelectorAll plus filter() can't work properly

本文关键字：可以 不正常 工作 函数 document querySelectorAll filter javascript      更新时间：2024-04-06

我想用javascript去掉那些里面有<span class="verfied-badge">的<tr>。（请注意，我希望有一个解决方案，只有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

但看起来，我一直在失败：（

希望有人能帮忙。

谢谢！

查找您关心的所有tr元素，然后查看它们是否包含匹配的verified-badge跨度。如果是，燃烧将其移除。

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);
        }
    });
});

我在从querySelectorAll返回的NodeList上调用了Array.prototype.slice，因为querySelectorAll不返回数组，而是返回NodeList，这是JavaScript令人恼火（但很容易解决）的"类数组对象"之一。

相关文章：