JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<table class='test'>
<tr>
  <th>Name</th>
  <th>Test 1</th>
  <th>Test 2</th>
  <th>Optional</th>
</tr>
<tr>
  <td>A</td>
  <td><input class='test1' type="checkbox"></td>
  <td><input class='test2' type="checkbox" checked="checked"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
<tr>
  <td>B</td>
  <td><input class='test1' type="checkbox"></td>
  <td><input class='test2' type="checkbox"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
<tr>
  <td>C</td>
  <td><input class='test1' type="checkbox"></td>
  <td><input class='test2' type="checkbox" checked="checked"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
</table>
<br>
<div class='result'>

</div>

JavaScript

$(".opt1").on("click",function(){
	var q = $(this);
  $(".result").css("border","1px solid red").html(q.parents("tr").html()).append( "<b>This row has been removed</b>" );
  q.parents("tr").remove();
});

$(".test2").on("click",function(){
	var q = $(this);
  
  if(!q.is(":checked")){
    $(".result").css("border","1px solid red").html(q.parents("tr").html()).append( "<b>This row has been removed</b>" );
  	q.parents("tr").remove();
  }else{
  	alert("CHECKED");
    $(".result").text("NEW CHECKED");
  }
  
});