How to delete mulitple rows on click of a button

user_9316276 0
Viewed 74

I want to delete the selected row on click of my delete button. My delete functionality is working fine the problem I am facing is only top most delete button is working my UI screen looks like below enter image description here

I select the table rows using the checkboxes. If I select all three records all three delete button should work and any delete button can delete the selected rows but in my case only first delete button is working. This is my html and js code. 

<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;
}

In controller i am performing delete

What i am missing here?

button jsp html javascript java
2 Answers

You are binding event with id which happens to be unique, hence, click event will work for only 1 element.

To solve this you can add class to the delete buttons. And iterate over them to bind the onclick event.

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
   }
}

Alternatively, you can have a function in your script and have onclick in your html for the same.

HTML

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

JS

function myFunction() {
  // your code
}
user_11323540

You should not use id as a selector for multiple buttons, because every element, in order to be properly selected by id should be unique, and thus selected one by one. For common functionality, when multiple similar elements to be selected class should be used instead.

refer this

user_56239580
Related