如果子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的.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

this特定的td使用parent 。 我在example.17上給出了兩個td 16-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>