изменить содержание блока при втором клике на другой элемент

Question

При клике на строку таблицы id="table-flats" строка, по которой произведен клик, добавляется в другую таблицу id="rez".

Подскажите, как мне добиться того, чтобы при повторном клике на ту же конкретную строку таблицы id="table-flats" из второй таблицы id="rez" удалялась эта же ранее добавленная туда строка?

Спасибо!

Вот такой код:

$('#table-flats tr').click(function(e){
var tr = $(this).closest("tr").get(0).outerHTML;


if ($(this).data('clicked')) { // ВОТ ЭТОТ БЛОК КОДА НЕ РАБОТАЕТ, К СОЖАЛЕНИЮ

    var rezult = '';
    document.getElementById('rez').innerHTML = rezult;
}

else {
// first click - ТУТ РАБОТАЕТ
$(this).data('clicked', false);
    document.getElementById('rez').innerHTML = tr; }
});

Answer 1

Надеюсь я правильно понял, что именно вы хотите реализовать.

$('#table-flats').on('click', 'tr', function(){ // При нажатии на tr
  if(!$(this).hasClass('-no-add')) { // Проверяем если класс, который запрещает "дублирование"
    if($(this).hasClass('--selected')) { // Проверяем "продублирован" ли. Если нет, то:
      $(this).removeClass('--selected'); // удаляем класс
      $('#rez').find('tr[data-i="'+$(this).index()+'"]').remove(); // Удаляем "дубликат"
    } else { // Если "продублирован", то:
      let clone = $(this).clone(); // Клонируем tr
      clone.attr('data-i', $(this).index()); // Добавляем ему некий идентификатор, по которому потом будем удалять
      $(this).addClass('--selected'); // добавляем класс
      $('#rez').append(clone); // добавляем "дубликат"
    }
  }
});

#table-flats tr.--selected {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table-flats" border="1">
   <tr class="-no-add">
    <th>AAA</th>
    <th>BBB</th>
    <th>CCC</th>
   </tr>
   <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
   </tr>
   <tr>
    <td>444</td>
    <td>555</td>
    <td>666</td>
   </tr>
   <tr>
    <td>777</td>
    <td>888</td>
    <td>999</td>
   </tr>
</table>
<br>
<table id="rez" border="1">
  <caption>Дубликаты</caption>
  <tr class="-no-add">
    <th>AAA</th>
    <th>BBB</th>
    <th>CCC</th>
   </tr>
</table>

БЛОГ НА HUSL

изменить содержание блока при втором клике на другой элемент

Ответы (1 шт):