Как связать добавление и удаленные данных с бэка при клике на checkbox?

Question

[vhsporno]

При клике на checkbox срабатывает submit, на сервер отправляются данные через ajax, в ответ получаю данные и вывожу их в таблицу вот таким образом:

data.playlist.forEach(function (song) {
                document.getElementsByClassName('all_files')[0].appendChild(document.createElement('tr')).innerHTML = '<td>' + song.name + '</td><td><button onclick="onButtonClick(' + song.name + ')" class="btn btn-sm btn-dark" id="' + song.name + '">Play</button></td>';
            });

Если убрать галочку с чекбокса, то данные останутся. Если поставить эту же галочку то придут данные, и добавятся еще раз в таблицу. Собственно вопрос, как сделать так, чтобы я поставил галочку, данные пришли, добавились в таблицу, галочку убрал, данные удалились и добавились новые?

Comments

[noeer]

А где у вас здесь checkbox?

Answer 1

[dollar]

Данные с бэка должны приходить с некоторыми уникальными id, которые нужно запоминать на клиенте. Если приходят повторно данные с теми же id, то игнорировать их заменять ими существующие данные. Если новые id, то тогда уже добавлять.

В соответствии с галочкой можно поставить либо массив id, либо определенный тип данных (по логике вещей галка обычно означает категорию в фильтре данных). Соответственно, в этом случае помимо id с бэка должен приходить также тип данных. Так что можно будет легко удалять данные на основе типа галки.