Попытка удалить кнопки при нажатии, но они продолжают возвращаться (JavaScript, HTML)

Question

У меня возникла проблема с кнопками, которые я не знаю, как их решить. У меня есть таблица, и каждая строка имеет кнопку действия «Пакет». Когда он нажимается, кнопка удаляется, чтобы пользователь не мог случайно щелкнуть ее снова и «упаковать» один и тот же элемент дважды.

Он работает хорошо до сих пор, но я заметил, что когда вы нажимаете на следующую страницу таблицы (когда у нее более 15 строк) и снова возвращаются на первую страницу, любые кнопки, которые вы нажмите на эту первую страницу (и удалили).

Независимо от того, на какие страницы вы переезжаете, мне нужна моя таблица, чтобы «запомнить», какие кнопки действий клавиш были нажаты/удалены. Однако я понятия не имею, как это сделать.

Вот мой код, который удаляет кнопку действия при нажатии кнопки:

// Pack action button 
$(document).on('click', ".box-electrode", function (e) { 
    var id = $(this).attr('value'); 
    var sn = $(this).data('sn'); 
    addElectrodeToBox(id, sn); 
    $(this).remove(); 
}); 

Сама таблица создается с помощью DataTables.

Может кто-нибудь указать мне в правильном направлении?

Редактировать

Вот код, который я придумал на основе ниже ответ, но это не работает. В консоли JS нет ошибок, он просто ничего не делает.

$(document).on('page.dt', function() { 
    var $allSerialNumbers = $('.box-electrode'); 

    $('#electrodes li').each(function (i, li) { 
     var $id = $(li).data('id'); 
     for(var index = 0; index < $allSerialNumbers.length; index++){ 
      if($id == $allSerialNumbers.eq(index).attr('data-id')){ 
       $('.box-electrode').eq(index).remove(); 
      } 
     } 
    }) 
}); 

$allSerialNumbers представляет все кнопки действий и $('#electrodes') список я сравниваю с.

Я думаю, что часть проблемы (кроме моих неуклюжих навыков JS) может оказаться, что DataTables' Изменение страницы событий page.dt только кажется, влияет на страницу, которая изменяется, а не на странице меняется в. Например, когда я нахожусь на второй странице моей таблицы и нажимаю на первую страницу, мой код JS действует на 2-й странице вместо 1-го (это то, что мне нужно).

Answer 1

1. Создать пустой блок JavaScript;
2. В библиотеке DataTables есть событие изменения страницы;
3. Когда пользователь нажимает кнопку - получите значение кнопки, сохраните ее в массиве и удалите кнопку;
4. Когда пользователь изменяет событие изменения страницы страницы, будет запущено - будет выполняться функция очистки, которая будет считывать массив, искать нужные кнопки по значению и удалять их, если они существуют.