How to remove class at serial cells in html tables

Question

Some event were registered in calendar like html tables.

I would like to unregister these event by clicking them.

To realize this,I would like to removeclass continuous cells. like

When we click3or4,then 3,4 cell's class will be removed.

When we click 13or14or15,then 13,14,15 cell's class will be removed.

When we click 9, then only 9 cell's class will be removed.

Is it possible?

and are there any way to realize it?

Thanks

$(function() {
  $("td").click(function() {
    $(this).removeClass();
  });
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua{
background-color:aqua;}

user_7461381 · Answer

You can first use .closest() to target the parent tr element then use .find() to target all the element with the class aqua to remove them:

$(function() {
  $("td").click(function() {
    $(this).closest('tr').find('.aqua').removeClass('aqua');
  });
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua{
background-color:aqua;}

user_1823841 · Answer

You can simply target only the cells having that aqua class to achieve this, instead of targeting every cell. Then using .closest('tr') find the closest parent tr for the clicked cell and after that using .find('td.aqua') find all the cells having the class aqua and then finally remove the class from each of them.

$(function() {
  $("td.aqua").click(function() {
    $(this).closest('tr').find('td.aqua').removeClass('aqua');
  });
});

td{transition-duration:.5s;border:solid #000 1px;padding:10px;text-align:center}
table{border-collapse:collapse}
.aqua{background-color:#0ff}

user_11969707 · Answer

if you want to remove aqua class when clicking each row then use this

$(function() { $("tr").click(function() { $(this).children().removeClass('aqua'); }); });

OR when clicking on the cells themselves use this

$(function() { $("tr>.aqua").click(function() { $(this).parent().children().removeClass('aqua'); }); });

$(function() {
  $("tr>.aqua").click(function() {
    $(this).parent().children().removeClass('aqua');
  });
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua {
  background-color: aqua;
}

user_6293914 · Answer

If you just change your script like below. Your code will work perfectly according to your requirement.

$(function() {
  $("tr").click(function() {
    $(this).children().removeClass();
  });
});

or else you can change like below as well. It also work perfectly.

$(function() {
  $("td").click(function() {
    $(this).closest('tr').find('.aqua').removeClass('aqua');
  });
});

Best Answer is using second method.

How to remove class at serial cells in html tables

4 Answers