Question

我有这个HTML结构：

 <tr class="project-details">REMOVE THIS</tr>
<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>

我希望整个<tr class="project-details">REMOVE THIS</tr>及其内容将被完全删除

这是我到目前为止所做的：

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

        }else {
            el.parentNode.removeChild(el);
            el.prev('tr').remove();
        }
    });
}

它的作用是选择<tr>和我正在寻找的<span>，然后删除整个范围。这部分el.prev('tr').remove();不起作用，还有其他选择吗？

谢谢！

Answer 1

prev是jQuery对象的一种方法。 HTMLElement对象没有prev方法。要选择前一个元素兄弟，您可以使用previousElementSibling属性。

Answer 2

else子句的正文：

(function removePreviousSibling(sibling) {
  if (sibling.nodeName === 'TR' && sibling.classList.contains('project-details')) {
    return sibling.parentNode.removeChild(sibling);
  }
  removePreviousSibling(sibling.previousSibling);
}(el.previousSibling));
el.parentNode.removeChild(el);

IIFE确保两个<tr>元素之间是否有额外的文本节点，如果您在removeChild上调用了previousSibling，则会跳过文本节点而不会删除该文本节点目标元素。

查看MDN's DOM page处的信息。它有一套很棒的界面文档和教程。

删除当前并删除之前使用普通的javascript

2 个答案: