Remove table row in separate table by id

Question

I have two tables I'm working with. The first table is a list of items (#myTable-unspoiled). When a row is clicked in the first table the .watching class is added and it gets cloned to second table which adds a .remove class (#myTable-watching).

When the same row is clicked again in the first table, I would like to remove the row that was cloned in the second table based on the row id. I'm having trouble doing this. Here's what I have.

Table 1

<table id="myTable-unspoiled">
    <tr id="row1" class="watching"><td>Some Data</td></tr>
</table>

Table 2

<table id="myTable-watching">
    <tr id="row1" class="remove"><td>Some Data</td></tr>
</table>

jQuery

if ($(this).hasClass("watching")) {
        trid = $(this).attr('id');

        $(".watching").click(function(){

            $('#myTable-watching tr:eq(trid)').remove();

        });

        $(this).toggleClass('watching');
}

I would also like to reverse this so if a user clicks the row in the #myTable-watching table it toggles the .watching class in the #myTable-unspoiled table based on the row id (but doesn't delete the row in #myTable-unspoiled).

My test page can be found here:

http://www.ffxiv-gathering.com/40-test.php

The only row currently with an id is Raw Triphane (450+) for testing purposes.

Answer 1

Simplest way is to modify row clone id's with a prefix for the watching table. Then parsing matching id's is fairly easy

var watchRowPrefix = 'watching-';

$('#myTable-unspoiled tbody tr').click(function() {
  var $row = $(this);
  if ($row.hasClass('watching')) {
    $('#' + watchRowPrefix + this.id).remove()
  } else {
    var $clone = $row.clone().attr('id', watchRowPrefix + this.id);
    $('#myTable-watching tbody').append($clone)
  }

  $row.toggleClass('watching');
})

$('#myTable-watching').on('click', ' tbody tr', function() {
  var unspoiledId = this.id.replace(watchRowPrefix, '');
  $('#' + unspoiledId).removeClass('watching');
  this.remove();
})

.watching {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>unspoiled</strong>
<table id="myTable-unspoiled">
  <tbody>
    <tr id="row1">
      <td>item 1</td>
    </tr>
    <tr id="row2">
      <td>item 2</td>
    </tr>
    <tr id="row3">
      <td>item 3</td>
    </tr>
    <tr id="row4">
      <td>item 4</td>
    </tr>
    <tr id="row5">
      <td>item 5</td>
    </tr>
  </tbody>
</table>

<strong>watching</strong>
<table id="myTable-watching">
  <tbody>
  </tbody>
</table>

Answer 2

You have basically two events:

1- Once you click on a row of the first table then you want to check if it was already copied to the second table (I used data attributes to identify table rows)

if(($('#myTable-watching').find('[data-reference="'+$(this).data('reference')+'"]').length==0){}

if this row is not existing then clone it else remove it.

2- If you click on a row of the second table : then find the same row in the first table and remove class watching:

$('#myTable-unspoiled').find('[data-reference="'+$(this).data('reference')+'"]').removeClass('watching');

and then remove the row from your table.

code:

$('#myTable-unspoiled > tbody > tr').click(function(){
   $(this).toggleClass('watching');
   if(($('#myTable-watching').find('[data-reference="'+$(this).data('reference')+'"]').length==0)){
      $('#myTable-watching > tbody').append($(this).clone().removeClass('watching'));
   }
   else {
      $('#myTable-watching').find('[data-reference="'+$(this).data('reference')+'"]').remove();
   }
});
$('#myTable-watching > tbody').on('click','> tr',function(){
   $('#myTable-unspoiled').find('[data-reference="'+$(this).data('reference')+'"]').removeClass('watching');
   $(this).remove();
});

#myTable-watching > tbody > tr , #myTable-unspoiled > tbody > tr {
   cursor:pointer;
   background: rgb(238, 238, 238) none repeat scroll 0% 0%;
}
.watching {
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="myTable-unspoiled" class="table table-condensed">
	<thead><tr style="cursor: pointer;">
		<th class="header headerSortDown">Item <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Level <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Map <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Time <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Class <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Scrip <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header headerSortDown">Status <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
	</tr></thead>
	<tbody>
	<tr class="hour-ten"  data-reference="1">
		<td>Bamboo Shoot (450+)</td>
		<td>63</td>
		<td>Yanxia (28, 25) (Slot 8)</td>
		<td>10:00</td>
		<td>Botany</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x35/38/42</td>
		<td class="status-ten">2 hr remaining</td>
	</tr><tr class="hour-twelve" style="" data-reference="2"> 
		<td>Ala Mhigan Salt Crystal (Underwater)</td>
		<td>70</td>
		<td>The Lochs (20, 28) (Slot 1)</td>
		<td>12:00</td>
		<td>Mining</td>
		<td class="scrip">--</td>
		<td class="status-twelve">active in 2 hr</td>
	</tr><tr class="hour-twelve" data-reference="3">
		<td>Raw Star Spinel (450+)</td>
		<td>63</td>
		<td>The Ruby Sea (15, 5) (Slot 8)</td>
		<td>12:00</td>
		<td>Mining</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x35/38/42</td>
		<td class="status-twelve">active in 2 hr</td>
	</tr><tr class="hour-six" data-reference="4">
		<td>Beech Branch (450+)</td>
		<td>60★★</td>
		<td>The Fringes (11, 17) (Slot 3)</td>
		<td>6:00</td>
		<td>Botany</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x25/27/30</td>
		<td class="status-six">n / a</td>
	</tr><tr class="hour-six" data-reference="5">
		<td>Hallowed Basil</td>
		<td>70★</td>
		<td>The Peaks (23, 16) (Slot 6)</td>
		<td>6:00</td>
		<td>Botany</td>
		<td class="scrip">--</td>
		<td class="status-six">n / a</td>
	</tr><tr class="hour-four" data-reference="6">
		<td>Jhammel Ginger (470+)</td>
		<td>70</td>
		<td>The Lochs (5, 8) (Slot 3)</td>
		<td>4:00</td>
		<td>Botany</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/yellow-gatherer-scrip.png"> x23/25/27</td>
		<td class="status-four">n / a</td>
	</tr><tr class="hour-eight" data-reference="7">
		<td>Lotus Root (450+)</td>
		<td>66</td>
		<td>Yanxia (28, 7) (Slot 7)</td>
		<td>8:00</td>
		<td>Botany</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x40/44/48</td>
		<td class="status-eight">n / a</td>
	</tr><tr class="hour-two" data-reference="8">
		<td>Othardian Plum (470+)</td>
		<td>70</td>
		<td>The Azim Steppe (27, 16) (Slot 2)</td>
		<td>2:00</td>
		<td>Botany</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/yellow-gatherer-scrip.png"> x25/27/30</td>
		<td class="status-two">n / a</td>
	</tr><tr class="hour-four" data-reference="9">
		<td>Raw Azurite (450+)</td>
		<td>66</td>
		<td>The Azim Steppe (5, 29) (Slot 7)</td>
		<td>4:00</td>
		<td>Mining</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x40/44/48</td>
		<td class="status-four">n / a</td>
	</tr><tr class="hour-six" data-reference="10">
		<td>Raw Imperial Jade (470+)</td>
		<td>70</td>
		<td>Yanxia (29, 9) (Slot 6)</td>
		<td>6:00</td>
		<td>Mining</td>
		<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/yellow-gatherer-scrip.png"> x23/25/27</td>
		<td class="status-six">n / a</td>
	</tr></tbody>
</table>


<br/><br/>
<table id="myTable-watching" class="table table-condensed">
	<thead><tr style="cursor: pointer;">
		<th class="header headerSortDown">Item <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Level <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Map <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Time <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Class <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header">Scrip <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
		<th class="header headerSortDown">Status <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
	</tr></thead>
	<tbody></tbody>
</table>