Javascript jQuery.remove（）删除错误的元素

我正在尝试制作一个营养标签，就像这样：

目前我的数据库已全部设置。我正在努力让它在目前的一件事，然后可以做它与其余的

我的数据库看起来像：

ingName: ....
fat: ... 
carbs ... etc

我现在面临的问题是巨大的。在过去的三天里，我一直在坚持，似乎没有人知道到底出了什么问题。我有一个cross by ever div，它被创建为用户可以删除他添加的成分。因此，如果他们有：

Apple : 1g
Mango : 2g 
Melon: 3g 
Total : 6g 

假设他们不再想要芒果，那么它应该是这样的：

Apple: 1g
Mango: 2g
Total: 3g

然而，我无法让它发挥作用。每次我点击十字架，它都会删除所有内容，而不会留下任何内容

HTML:

总脂肪
0
22%

我的实时站点：

编辑：现在你们看到了，每次我删除一个div，而不是我在数据库中设置的amount，它只会带走-1？这是问题的主要部分，我一直坚持着

$(this).remove();

您正在删除所有内容，因为“this”指的是包含所有内容的div“.selectedStuff”

您需要改用委派事件：

$(".selectedStuff").on("click", "span", function() {
    $(this).parent().remove();
});

试试看。它会将事件委托给.selectedStuff div中包含的任何span元素。最好给“X”span一个类，如

X

，以便更好地执行此操作，然后您可以使用：

$(".selectedStuff").on("click", ".deleteButton", function() {
    $(this).parent().remove();
});

---

这就是您显示所选配料的方式吗

"<div>" + searchedValue + "<span data-fat='"+data+"' data-itemfat='"+data+"'>X</span></div>"

然后，使用脚本删除成分：

$(document).on("click", ".ingredient", function(){

    var curr_fat = parseInt($("#fat").html()), /* GET THE CURRENT FAT */
        toberemovedfat = parseInt($(this).attr('data-fat')); /* GET THE FAT OF THE 'TO BE REMOVED' INGREDIENT */
    curr_fat = curr_fat - toberemovedfat; /* GET THE DIFFERENCE */
    $("#fat").html(curr_fat); /* DISPLAY THE NEW FAT */
    $(this).remove(); /* REMOVE THE DISPLAY OF REMOVED INGREDIENT */

});

---

问题是您选择的是容器div，而不是事件处理程序中的项

$('.selectedStuff').on("click", function(){

                        $(this).remove();
                    });

这将移除外部div

你最好这样做

$('.selectedStuff').on("click", 'span', function(){

                        $(this).closest('div').remove();
                    });

当您单击.selectedStuff元素中的范围时，它将删除最近的div元素

---

希望有帮助

如果问题仍然存在。。。。比考虑…我发现有很好的解释

• 这是因为Jquery Click函数对于动态添加的数据表现不正常，因为这些引用在DOM中不存在

解决方案：-

只需在单击span时调用一个方法 那样

<div>" + searchedValue + "<span onclick="removeStuff(this);" "data-fat='"+data+"' data-itemfat='"+data+"'>X</span></div>

---

啊，我已经摆脱了它，但是现在它自己不会删除的div，还有它里面的fat内容。消失的数字是我的网站，你能明白我的意思吗？当你点击span时，你的控制台会说什么？有错误吗？你删除了$（这个）.remove（）而不是将其移动到正确的位置。我应该移动它吗？啊，我尝试过这个：（但这不起作用，这个问题让我和很多人发疯：）似乎没有人能解决它，当涉及到减法时，如果你想看的话，我会现场上传我的网站，如果有帮助的话你试过这个吗？但我认为您应该首先修复在选择配料时的显示，它会显示

1'数据项fat='1'>X

。来自

build.php

的

数据

从html转义，结果显示出来。啊，是的，我的朋友尝试了一些东西，但它不起作用，你能告诉我你想要我尝试的确切代码吗？万一我写错了，你只需要为你的

X

的

span

分配一个

类

标记。然后添加我在你的

抱歉logan中制作的脚本，这样做了吗？我真的不明白如果我是你，我会把我的代码简化成更易于管理和模块化的函数，这样我就可以评估每个移动部件的完整性；这一切归根结底都是为了管理一系列数据和状态。@nocarrier我不是这方面的佼佼者，我已经奋斗了几天，所以我会努力让我们大家都有所学习：）啊，那么胖人在下面帮忙：）慢慢地到达那里@nocarrier仍然一无所获：（安拉没有减去1乘1：）这很好，但我标签右边的数字仍然是空的这是因为你分配和检索数据的方式。试试

$（'.selectedStuff span'）.data（'fat'）；

看看你得到了什么。当你创建行时，使用

$（'X'）.data（'fat'，1）；

然后查看

$（'.selectedStuff'）.data（'fat'）；

$('.selectedStuff').on("click", 'span', function(){

                        $(this).closest('div').remove();
                    });

<div>" + searchedValue + "<span onclick="removeStuff(this);" "data-fat='"+data+"' data-itemfat='"+data+"'>X</span></div>

 function removeStuff(thisVar)
{
    $(thisVar).parents('.selectedStuff').remove();
}