jQvery css поиск и сокрытие элемента

Question

Есть верстка которая идёт из бекенда

<table class="stores_list">
  <tbody>
    <tr>
      <td class="legend">Магазин 1</td>
      <td data-name="1" class="value"></td>
    </tr>
    <tr>
      <td class="legend">Магазин 2</td>
      <td data-name="3" class="value"></td>
    </tr>
  </tbody>
</table>

Так вот надо найти у удалить Магазин 2. Через Jqvery но удалить именно по названию. Что бы она нашла эту запись (Номер записи, ее содержимое, очерёдность всё может меняться) Не изменчиво только название магазина. Так вот как по названию, найти этот элемент и скрыть его. То есть полностью скрыть запись в таблице

<tr>
  <td class="legend">Магазин 2</td>
  <td data-name="3" class="value"></td>
</tr>

Дескать полностью скрыть запись от <tr> до </tr> На <td data-name="3" class="value"></td> особо внимание не обращайте. Так как это пока что есть а потом его не будет. В идеале что было что-то в этом духе после отработки скрипта

<tr style = "display:none">
  <td class="legend">Магазин 2</td>
  <td data-name="1" class="value"></td>
</tr>

Answer 1

jQuery(function($) {
  $("tr:has(td.legend:contains('Магазин 2'))").hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="stores_list">
  <tbody>
    <tr>
      <td class="legend">Магазин 1</td>
      <td data-name="1" class="value"></td>
    </tr>
    <tr>
      <td class="legend">Магазин 2</td>
      <td data-name="3" class="value"></td>
    </tr>
  </tbody>
</table>

Пояснение: ищем все <tr>, которые содержат <td> с классом legend и эти <td> содержат в себе фразу Магазин 2.

Примечание: текст именно содержит фразу, а не равен ей

Или для проверки точного соответствия

jQuery(function($) {
  $("tr:has(td.legend)").filter(function() {
    return $("td", this).text() == "Магазин 2";
  }).hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="stores_list">
  <tbody>
    <tr>
      <td class="legend">Магазин 1</td>
      <td data-name="1" class="value"></td>
    </tr>
    <tr>
      <td class="legend">Магазин 2</td>
      <td data-name="3" class="value"></td>
    </tr>
    <tr>
      <td class="legend">Магазин 22</td>
      <td data-name="3" class="value"></td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

jQvery css поиск и сокрытие элемента

Ответы (1 шт):