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

Question

我尝试删除从 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>

我的 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;
}

我搜索了论坛，但没有找到与我的问题匹配的内容。另外，我是新手，所以请假设愚蠢。谢谢。

Answer 1

感谢你们所有的帮助，这确实帮助我调试了这个!

最后，问题是某些项目代码中包含句点(“shirt235.b”)，并且 jQuery 在检索句点时会出现问题(It's in the FAQ.) )。

我真的很抱歉，为了简单起见，我使用了一个虚构的示例，认为 item_code 是什么并不重要...我已经吸取了教训，并且将仅发布真实世界代码从现在开始!请接受我的歉意并感谢您的理解。

祝你度过愉快的一周!