如果子div具有特定值，则删除父div类

Question

我有以下代码：

<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
   <button type="button" class="CalendarDay__button">16</button>
</td>

检查按钮值是否为16，然后从父div中删除.CalendarDay--valid。

我该怎么做？

Answer 1

您可以使用closest()方法来做到这一点：

var elem = $('.CalendarDay__button');
if (elem.text().trim() === '16') {
  elem.closest('.CalendarDay--valid').removeClass('CalendarDay--valid');
}

.CalendarDay--valid button{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">16</button>
    </td>
  </tr>
</table>

Answer 2

将parent与this一起用于特定的td。我在示例中给出了两个td 16 –17。显示了17，但删除了16。

$('.CalendarDay').find('.CalendarDay__button').each(function() {
  if ($(this).text() == '16')
    $(this).parent('td').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">16</button>
    </td>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">17</button>
    </td>
  </tr>
</table>

Answer 3

如果要检查多个按钮，请尝试以下操作：

$.each($('.CalendarDay__button'),function(){
    var btn = $(this);
    var parent = btn.closest('.CalendarDay');
    // Before
    console.log(parent.attr('class'))
    if(btn.text() == "16"){
        parent.removeClass('CalendarDay--valid');
        // After
        console.log(parent.attr('class'))
    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">16</button>
    </td>
  </tr>
</table>