jQuery ajax post parameter without form

Question

I have a list of fetch items loop from database, each of the item has a link for deletion, my question is how can I delete them without a <form> with ajax? how can I post each list_id to request deletion using jQuery?

while($row = $user_lists->fetch_object()){


echo '<tr>
        <td>
            <p class="tb"><b>'.$row->name.'</b></p>
            <p class="tb">'.$row->area.'</p>
            <p class="tb">'.$row->agent_name.'</p>
            <p class="tb">'.date('d-M', strtotime($row->date_created)).'</p>
        </td>
        <td class="middle">
            <a class="btn btn-xs btn-primary" href="?edit='.$row->list_id.'">Edit</span></a>
            <a class="btn btn-xs btn-danger" id="btn_remove" href="#">Remove</a>                
        </td>
     </tr>';
}

I knew I can use the same way as what it did like Edit.

Answer 1

you can do something like this:

<a class="btn btn-xs btn-danger" id="btn_remove" href="#">Remove</a>  

change it to

<a class="btn btn-xs btn-danger btn_remove" href="#" data-id="'. $row->list_id .'">Remove</a>

now write a click event to btn-remove:

$('.btn_remove').on('click', function() {

  var id = $(this).data('id');  // get the `id` from data property

  // send a ajax request
  $.ajax({
     url: '',
     data: { id: id },
     ......
  });

});