如何通过单击元素删除类

Question

在我的代码段中，有 3 个按钮，我想使用erase按钮。

点击后erase按钮，我想Removeclass by clicking each cells one by one 。

有什么方法吗？

谢谢

 var $ = jQuery; var style =''; let clicked=[]; $('.click_btn').on('click', function(e) { e.preventDefault(); style = $(this).data().style; }) $('.click_td').on('click', function(){ $(this).removeClass('style1 style2').addClass(style) let clickedID=$(this).attr('id'); clicked.push(clickedID); })

 .style1 { background: rgb(255, 0, 255); border-radius: 5px; } .style2 { background: rgb(0, 255, 255); border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td class="click_td" id=0>color</td> <td class="click_td" id=1>color 2</td> <td class="click_td" id=2>color 3</td> <td class="click_td" id=3>color 4</td> <td class="click_td" id=4>color 5</td> </tr> </table> <button class="click_btn" data-style="style1">can be erased</button> <button class="click_btn" data-style="style2">cannot be erased</button> <button class="erase">erase</button>

Answer 1

您可以尝试添加/删除一个类，您可以根据该类删除样式类：

 var $ = jQuery; var style =''; //let clicked=[]; $('.click_btn').on('click', function(e) { e.preventDefault(); style = $(this).data().style; $('.erase').removeClass('erase-clicked'); }) $('.click_td').on('click', function(){ $(this).addClass(style); let clickedID=$(this).attr('id'); if($('.erase').hasClass('erase-clicked')){ $(this).removeClass('style1 style2') } }); $('.erase').click(function(){ $(this).addClass('erase-clicked'); });

 .style1 { background: rgb(255, 0, 255); border-radius: 5px; } .style2 { background: rgb(255, 0, 255); border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td class="click_td" id=0>color</td> <td class="click_td" id=1>color 2</td> <td class="click_td" id=2>color 3</td> <td class="click_td" id=3>color 4</td> <td class="click_td" id=4>color 5</td> </tr> </table> <button class="click_btn" data-style="style1">can be erased</button> <button class="click_btn" data-style="style2">cannot be erased</button> <button class="erase">erase</button>

Answer 2

你可以试试这个代码...

$('.click_btn').on('click', function () {
        e.preventDefault();
        style = $(this).data().style;
        $('.click_td').addClass(style);
    });

    $('.erase').on('click', function () {
        $('.click_td').on('click', function () {
            $(this).removeClass('style1 style2');`enter code here`
        })
    })

说明：当单击任何按钮 '.click_btn' 时，它会根据数据样式和 css 类激活指定的样式...

单击擦除时，它会激活所有单元格以在单击时单独删除样式类