JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<table>
<tr>
  <th>Name</th>
  <th>Value</th>
</tr>
<tr class="tr_1">
  <td>CSS</td>
  <td>20</td>
</tr>
<tr class="tr_2">
  <td>HTML</td>
  <td>100</td>
</tr>
<tr class="tr_3">
  <td>JQuery</td>
  <td>20</td>
</tr>
</table>
<br>

<br>

<table>
<tr>
  <th>Name</th>
  <th>Test 1</th>
  <th>Test 2</th>
  <th>Optional</th>
</tr>
<tr data-target="tr_1">
  <td>A</td>
  <td><input class='test1' type="checkbox" data-target=""></td>
  <td><input class='test2' type="checkbox" data-target="tr_1" checked="checked"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
<tr data-target="tr_2">
  <td>B</td>
  <td><input class='test1' type="checkbox" data-target=""></td>
  <td><input class='test2' type="checkbox" data-target="tr_2"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
<tr data-target="tr_3">
  <td>C</td>
  <td><input class='test1' type="checkbox" data-target=""></td>
  <td><input class='test2' type="checkbox" data-target="tr_3" 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);
  var w = q.parents("tr").data("target");
	var target = $("." + w);
  
  $(".result").css("border","1px solid red").html(target.html()).append( "<b>This row has been removed</b>" );
  target.hide();
  q.parents("tr").find(".test2").prop("checked","");
});

// change the show() to remove() if you want to remove it completely

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