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
Via Active questions tagged javascript - Stack Overflow https://ift.tt/1x4cBp5
Comments
Post a Comment