Javascript 如何删除jQuery中AJAX调用后添加的元素？

我正在尝试删除从AJAX调用返回时添加到页面中的HTML元素。 但是jQuery似乎不知道这些动态添加的元素。有什么解决办法吗

上下文：

• 我正在建造一个简单的购物车
• 当用户单击“添加”按钮时，我将该项目添加到数据库中，并希望在屏幕上显示该项目，而无需重新加载页面
• 但是因为用户可能会多次单击同一项目的“添加” 在购物会话中，每次他单击时，我都要删除任何 购物车DIV中的商品行，并仅保留最 该项目的最新版本

现在，它不起作用，所以我的HTML在多次添加后看起来是这样的：

<div id="CartList">
  <p id="Item_shirt7363">shirt7363</p>
  <p id="Item_shirt7363">shirt7363</p>
  <p id="Item_shirt7363">shirt7363</p>
</div>

衬衫7363

衬衫7363

衬衫7363

我的jQuery如下所示：

function AddToCartClicked()
{
    item_code = $("#ItemCode").val();
    qty = $("#Qty").val(); 

    $.ajax
        (
            {
                type: "POST",
                url: "/_res/php/add-item.php",
                dataType: "text",
                data: "puid=123&code=" + item_code + "&qty=" + qty,
                success: function(data)
                {       
                    // PROBLEM: First, remove any existing line with this ID
                    $("#Item_" + item_code).remove();               

                    // Write new line
                    newLine = "<p id='Item_" + item_code + "'>" + item_code + "</p>";                   

                    // Add the line in the HTML
                    $("#CartList").prepend(newLine);
                }
            }
        );

    return true;
}

函数AddToCartClicked（）
{
item#code=$（“#ItemCode”）.val（）；
数量=$（“#数量”）.val（）；
$.ajax
(
{
类型：“POST”，
url:“/\u res/php/add item.php”，
数据类型：“文本”，
数据：“puid=123&code=“+项目代码+”&qty=“+数量，
成功：功能（数据）
{       
//问题：首先，删除任何具有此ID的现有行
$（“#Item_u”+Item_u代码）.remove（）；
//写新行
换行符=“
“+Item_ucode+”
”；
//在HTML中添加该行
$（“#CartList”）.prepend（换行符）；
}
}
);
返回true；
}

我搜索了论坛，没有找到与我的问题相匹配的。另外，我对这方面还不熟悉，所以请假设我很愚蠢。谢谢

我认为val（）只适用于表单元素，因此在段落元素上调用它时无法得到有效的返回；因此，您的选择器没有选择任何内容

---

要进行调试，请尝试输出val（）结果（item_code变量），并查看选择器返回的长度。

这看起来在大多数情况下都应该有效，但下面可能存在以下竞争条件：

想象一下，如果用户单击“添加”两次，然后浏览器接收并并行运行两个回调函数

callsback不是原子的，它们都可以在执行“prepend”函数之前完成“remove”函数。在这种情况下，将添加两个副本

---

一种解决方案可以是使用某种ajax队列，或者使用变量模拟“锁”。

也有点新手，但是多个相同的ID是不好的。请尝试使用.attr（'data-id'，item_code）作为选择器，或者创建唯一的id。

谢谢大家的帮助，它确实帮助了我调试它

最后，问题是一些条目代码中有一个句点（（“shirt235.b”），如果没有转义句点（），jQuery在检索时会遇到问题

我真的很抱歉，为了简单起见，我使用了一个虚构的例子，认为item_代码是什么并不重要。。。我已经吸取了教训，从现在起，我将只发布真实世界的代码！请接受我的道歉并感谢您的理解

---

祝你一周愉快

我们假设暂时无知而不是愚蠢如何？您是否尝试过使用

.replacewith（）

而不是删除？在尝试删除它之前，您是否可以控制台.log（$（“#Item_”+Item_code）.length）？理论上是1。另外，请记住，如果后一个ajax调用在前一个调用之前返回，则可能会遇到竞争条件。它可能会用旧的覆盖新的。我喜欢异步编程。。。对我有用。一定是不一样的？你能提供更多的代码吗？这是你的真实代码，还是被修改了？老兄，这是他的问题。它应该删除该行，然后重新添加它。我不认为在

p

元素上调用

.val（）

。

p

来自根据

.val（）

调用的结果生成的HTML字符串。由于

p

元素与

项_code

一起显示，因此该部分似乎工作正常。多个ID是OP试图解决的问题。他想知道为什么这一行

$（“#Item_u”+Item_ucode）.remove（）在创建新项目之前，没有成功删除具有该ID的项目。啊，我明白了。如果工作正常，将不会有多个元素具有该ID。因此，Greg的调试建议是可行的。是的，没错。我们肯定遗漏了一些东西。记录一些值肯定会有帮助。回调本身必须同步运行。一旦一个开始，另一个将无法开始，直到上一个返回。只有当
.prepend（）
本身异步运行时，才能更改流，就像在
setTimeout（）中一样。