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

Question

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

Answer 1

As @david said, the problem is in the javascript, the code:

$.ajax({
    type: "POST",
    url: "delete_entry.php",
    data: ({
        id: id
    }),
    cache: false,
    success: function (html) {
        $('#id li').remove()

    }
});

Is picking up the element:

<element id="id">
    <li>...</li>
</element>

Which does not exist, the correct should be for example:

$.ajax({
    type: "POST",
    url: "delete_entry.php",
    data: ({
        id: id
    }),
    cache: false,
    success: function (html) {
        $(`#${id}`).remove()

    }
});

This code searches and deletes the element with for example id=46:

<li id="46">
    ...
</li>