仅当元素包含具有某些指定文本的元素时，如何按类删除元素？

Question

<tr class="Action Head" data-index="1">
    <td class="Template">
        <div class="Description">
            <span class="Text Description" id="MainDescription">text</span>
        </div>
    </td>
</tr>

如果 id="MainDescription" 里面的 span 包含一些指定的文本，我该如何删除 class="Action Head" 的元素？

Answer 1

您可以使用函数querySelectorAll来收集整个Action Head元素集，然后遍历这些元素，并为每个Action Head元素获取其 span 元素。

使用该span元素检查属性textContent 。

此代码段将仅删除一个 TR。

 var actions = document.querySelectorAll('.Action.Head'); Array.prototype.forEach.call(actions, function(action) { var span = action.querySelector('span'); if (span.textContent === 'text') span.remove(); });

 <table> <tbody> <tr class="Action Head" data-index="1"> <td class="Template"> <div class="Description"> <span class="Text Description" id="MainDescription">text</span> </div> </td> </tr> <tr class="Action Head" data-index="1"> <td class="Template"> <div class="Description"> <span class="Text Description" id="MainDescription2">text2</span> </div> </td> </tr> </tbody> </table>

Answer 2

您可以使用Array.filter按内容选择元素，使用检查元素内容以查看其是否符合您所需条件的函数。 例如：

//variable rowsToRemove will be an array that contains all the rows that contain
//a span with id MainDescription which contain the word 'text'

var rowsToRemove = [].filter.call(document.querySelectorAll('.Action.Head'), function(row){
    var mainDescriptionSpan = row.querySelector('span#MainDescription');
    return (mainDescriptionSpan && mainDescriptionSpan.textContent.indexOf('text') != -1);
});

if (rowsToRemove.length) {  //if there are some row(s) that match the criteria...
    rowsToRemove.forEach(function(row){  // ... loop through all of them ...
        row.remove();  // ... and remove them.
    });
}