jquery, js jsp. onclick delete specific row

Question

Guys I have a button which on click post's a query which deletes values from DB. Right now when I click button it is deleting all the records from DB, but What I want is whichever ID is clicked just delete record for that ID only. I need to set up ID of a button dynamically , please look below for eg. Also suggest me there are any other alternatives to achieve this. Any help will be greatly appreciated.

//just for eg
//this is my id which im getting from DB
document.getElementsByClassName(".sui").value=$(this).attr("id"); [101,102---]

//this is my button 
<button type="button" class="sukuti" >click me</button>

//myquestion is how do I set it of button to be ($(this).attr("id"))

Are you making an Ajax POST call to the backend, specifying the ID associated with the clicked button? I guess I am trying to understand how you have attached the ID value in the UI. — Web User, May 22 '17 at 17:40
that's the issue , I do not know how to assign specific ID to the button. — david, May 22 '17 at 17:47
Are you generating rows of data (corresponding to records in the DB) with a button associated with each row? I presume you are using JSTL with JSP? — Web User, May 22 '17 at 17:49
onclick of class name I am getting a from with all the info loaded from DB like name, email... inside that form I have a delete button without any ID assigned. Sorry if my words are confusing — david, May 22 '17 at 17:53

score 0 · Answer 1 · answered May 22 '17 at 18:06

If I understood right, you were trying to fetch ID of the last clicked row and issue a query to the database server.

I assume you have a table and for every row a button to delete the row.

First create the backend that accepts an row ID and deletes the corresponding row from eg. mySQL. This can be made with PHP. But this is for another question..

"DELETE from MyTable WHERE id=" + id

Then in the table element (I am not sure how you are generating dynamic tables but I assume you are doing this by fetching JSON from the backend) place a button and set onclick event to

myFunction(dbArray[id])
//so the input would look like
//<button onclick="myFunction(102)">Delete</button>

Aim here is to generate button WITH the id parameter inside our onclick function. A simple function might look like this:

function myFunction(myid){
  //something to do with ID, maybe an AJAX query
  //explaining AJAX to the backend in this scenario
  $.ajax({
   type: "POST", //you might use GET aswell
   data: {'id': myid},
   url: 'deleterow.php',
   cache: false,
   success: function(msg) {
     //do something with received value
     //this is the raw output of your backend service aswell
     //basically, what you see on the screen :)
     console.log("Succesfully deleted id:" + myid + ". msg:" + msg);
   }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 2 · answered May 22 '17 at 18:42

Based on the extra information you provided in your comments, clicking on a data row brings up a form that displays the full record and facilitates a mechanism (button) for deleting that record. But clicking on the button deletes all the records, and not just one specific record.

Do not design a server side method to delete all the records, unless you want to have that option. Even if you want to do that, it is safer to have a separate method with a different URL to delete all the records.
Since you are using POST, either use a hidden form input <input type="hidden" name="id" value="101" />, or a HTML5 style data attribute in the button itself, you can use that to submit the request to the server. Check this SO thread for related ideas.

jquery, js jsp. onclick delete specific row

2 Answers2