how to remove a ul li by id after a ajax call to delete a MySQL row? not sure where in the i put (#liid).remove with jquery - Hack The Tech - Latest News related to Computer and Technology

Hack The Tech - Latest News related to Computer and Technology

Get Daily Latest News related to Computer and Technology and hack the world.

Tuesday, June 27, 2023

how to remove a ul li by id after a ajax call to delete a MySQL row? not sure where in the i put (#liid).remove with jquery

I have a app that shows list of income items where each item is inside a li with a id= "number,item description and little trash icon inside the li. so far i have a code that calls a ajax when the user clicks the trash icon that removes the mysql row using a php script called by ajax, however i am not able to remove the li with a unique id without refreshing the page when i click on trash icon

this is a piece of the code that i have so far

<ul>
  <?php  $sqlinc = "SELECT * FROM transactions WHERE username = '$username' AND transaction = 'income'";
  $resultinc = mysqli_query($conn, $sqlinc);
  if (mysqli_num_rows($resultinc) > 0) {
  // output data of each row
  while($rowinc = mysqli_fetch_assoc($resultinc)) {

echo '<li class="delli" id="'.$rowinc['id'].'">
        <button id="" class="fl delbutton" onclick="">'.  $rowinc['memo'].'</button>
        <span class="fr">
        <button>'. $rowinc['amount'].'</button>
        <button class="delbutton" id="'.$rowinc['id'].'">
        <i class="fa fa-trash">'.$rowinc['id'].'</i>
        </button>
        </span>
      </li> '; }}?>

<!--  <li>
        <button class="fl" onclick="changeIncomeName()">name</button>
        <span class="fr">
        <button>100</button>
        <button data-delete="item">
        <i class="fa fa-trash"></i>
        </button>
        </span>
      </li> -->
</ul>

<!-- 'script to remove income row from mysql' section --> 
<script>
function aler() {
  alert("Transaction submited!");
</script>
<!-- 'delete mysql row' section --> 
<script type="text/javascript">
$(document).ready(function() {
$('.delbutton').click(function() {

var id = $(this).attr("id");
if (confirm("Are you sure you want to delete this Member?")) {
  $.ajax({
    type: "POST",
    url: "delete_entry.php",
    data: ({
    id: id
  }),
cache: false,
success: function(html) {
  $('#id li').remove()

  }
});
} else {
  return false;
}
});
});
</script>
<!-- 'end of planned page income list' section -->  

but it only gets rid of the li after i refresh the page



source https://stackoverflow.com/questions/76559379/how-to-remove-a-ul-li-by-id-after-a-ajax-call-to-delete-a-mysql-row-not-sure-w

No comments:

Post a Comment