Как удалить элемент по классу, только если он содержит элемент с указанным текстом?

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>

Как я могу удалить элемент с class = "Action Head", если span внутри него с id = "MainDescription" содержит определенный текст?

Answer 1

Вы можете использовать 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.
    });
}

Answer 2

Вы можете использовать функцию 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>