Как удалить несколько строк по нажатию кнопки

Question

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

Я выбираю строки таблицы с помощью флажков. Если я выберу все три записи, все три кнопки удаления должны работать, и любая кнопка удаления может удалить выбранные строки, но в моем случае работает только первая кнопка удаления. Это мой код HTML и JS.

<td class="td-org">${entry.sORGID}</td>
<td class="td-org">${entry.url}</td>
<td class="td-org">${entry.type}</td>
<td class="td-org"><a href="" onclick="testing("")" />Testing</td>
<td class="td-org"><input type="button" value="Delete" id="btntest" />

document.getElementById('btntest').onclick = function(){
      var selchbox = getSelectedChbox(this.form);     // gets the array returned by getSelectedChbox()
    var myvalue = JSON.stringify(selchbox);
     //document.write("check check"+selchbox);
      $.ajax({
            type: "POST",
            url: "/delete",
            dataType : "JSON",
            contentType:"application/json; charset=utf-8",
            data: JSON.stringify(selchbox),
            cache: false,
            success: function (data) {
                         alert("SUCCESS!!!");
                     },
                     error: function (args) {
                         alert("Error on ajax post");
                     }

        });
      //alert(selchbox);
    }

getSelectedChbox code

function getSelectedChbox(ele) {
  var selchbox = [];        // array that will store the value of selected checkboxes

  // gets all the input tags in frm, and their number
  var inpfields = ele.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;

  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox

  for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
    //selchbox = JSON.stringify({'selchbox' : selchbox});


  }

  return selchbox;
}

В контроллере я выполняю удаление

Что мне здесь не хватает?

Answer 1

Не следует использовать id в качестве селектора для нескольких кнопок, потому что каждый элемент для правильного выбора по идентификатору должен быть уникальным и, следовательно, выбираться один за другим. Для общей функциональности, когда вместо нескольких одинаковых элементов следует выбрать class .

см. это

Answer 2

Вы связываете событие с id, которое оказывается уникальным, следовательно, событие click будет работать только для 1 элемента.

Чтобы решить эту проблему, вы можете добавить класс к кнопкам delete. И итерируйте их, чтобы связать событие onclick.

HTML

<td class="td-org"><input type="button" value="Delete" class="delete-btn" />

JS

let btns = document.querySelectorAll('.delete-btn');
for(let i = 0; i < btns.length; i++) {
   let btn= btns[i];
   btn.onclick = function() {
       // your code
   }
}

В качестве альтернативы, вы можете иметь функцию в вашем скрипте и иметь onclick в вашем html для того же самого.

HTML

<td class="td-org"><input type="button" value="Delete" onclick="myFunction()" />

JS

function myFunction() {
  // your code
}