如何在ajax调用删除MySQL行后通过ID删除UL LI？不确定在 I Put （#liid）.remove with jquery 的什么位置

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

提问人：Marcos Almeida 提问时间：6/27/2023 最后编辑：DavidMarcos Almeida 更新时间：6/27/2023 访问量：36

问：

我有一个应用程序，可以显示收入项目列表，其中每个项目都在 id = 的 li 中 到目前为止，我有一个代码，当用户单击垃圾桶图标时调用AJAX，该图标使用AJAX调用的PHP脚本删除MySQL行，但是当我单击垃圾桶图标时，如果不刷新页面，则我无法删除具有唯一ID的LI

这是我目前拥有的一段代码

<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 -->

但它只有在我刷新页面后才会删除 li

javascript php html css ajax

评论

2赞 David 6/27/2023
在浏览器的调试工具中，在开发控制台上，在 AJAX 操作之前或之后是否有任何错误？AJAX 操作是否成功？当您使用浏览器的脚本调试器并在 上放置断点时，它是否曾经被调用过？是否真的与标记中的任何元素匹配？（您的意思是使用变量而不是硬编码选择器吗？$('#id li').remove()#id liid#id
0赞 Marcos Almeida 6/27/2023
当我在 Chrome 上查看时，它没有显示任何错误，并且在 Ajax 调用它时删除 MySQL 行的部分有效，当您说浏览器调试工具时，这是 Chrome 浏览器中的工具还是我正在使用的 Visual Studio Code 的 IDE？
0赞 David 6/27/2023
在这种情况下，脚本调试器将是 Chrome 中的调试器，尽管您当然可以使用任何您喜欢的调试器。作为猜测我怀疑这是错误的选择器。您尝试选择的确切 HTML 元素是什么？'#id li'
0赞 Marcos Almeida 6/27/2023
li id 是动态创建的，每个 id 号都与 MySQL 行 id 相对应，以便我可以将 li id 用作 jquery 选择器来使用 remove 函数，我还尝试使用 $（“#with-the-li-id-numver”）.remove（_） 但它确实有效，或者我可能将该命令放在我假设的 ajax 代码中的错误位置
0赞 David 6/27/2023
好吧，如果你的目的是在该选择器中使用变量，那不是你所做的。您的选择器是文字字符串，它以页面上单个元素中的任何元素为目标。你只是在问如何在 JavaScript 中使用字符串中的变量吗？id'#id li'<li>id="id"

答：

1赞 redystum 6/27/2023 #1

正如@david所说，问题出在javascript中，代码：

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

    }
});

正在拾取元素：

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

其中不存在，正确的应该是例如：

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

    }
});

此代码搜索并删除元素，例如 id=46：

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

上一个：HTML 类未更新（未刷新页面）

下一个：WordPress 网站 - 在满足某些条件时应用 CSS