Question

嗨，各位大家好，所以我试图制作一个像这样的章形标签：Example

Curretnly我的数据库全部设置完毕。试图让它在目前工作一件事，然后可以与其余的一起做。

我的数据库看起来像：

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

我现在遇到的问题是巨大的。我在过去的3天里一直被困在它上面，似乎没有人知道什么是错的，我有一个十字架创建的div，以便用户可以删除他添加的成分。所以，如果他们有：

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

让我们说他们不再需要芒果了它应该看起来像 Apple：1g 芒果：2克总计：3克

然而，我似乎无法让它工作。每次我点击十字架，它都会删除所有内容而不会留下任何内容。所以，请对此提供任何帮助，这将是一个巨大的帮助。用这段代码开始迷失我的想法。

HTML：

  <tr>
    <th colspan="2">
      <b>Total Fat</b>
     <span id="fat">0.0</span>
    </th>
    <td>
      <b>22%</b>
    </td>
  </tr>
<input type="text" name='search_term' id="search_term" class="searchFunction">
<input id="addButton" type="button" value="Add">
<div class="dropdown">
    <ul class="result"></ul>
</div>
<div class="selectedStuff"></div>

我的直播网站：

http://diet.elementalbydesign.com/bootstrap-3.3.6-dist/build.php

编辑：现在你看到人们每次删除div而不是我在数据库中设置的ammount时它只会带走-1？这是我坚持的问题的重要部分

Answer 1

这是您展示所选成分的方式吗？

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

首先修复来自build.php的返回数据，因为例如，当选择Banana时，它会返回<script>$(" #fat').html(3);<="" script="">4'，这就是显示4' data-itemfat='4'>X的原因。确保它只返回成分的id！没有HTML元素或任何内容。

不确定appendTo()是否是显示数据的正确选择，但我建议您尝试append()。阅读有关差异的更多信息here。我们会为您的class添加<span>标记，以便对其进行标记：

divHolder.append('<div style="background-color: yellow;
                              width: 700px;
                              margin-top: 10px;
                              border-style: solid;
                              border-color: #0000ff">' + searchedValue + '
                      <span data-fat="'+data+'" data-itemfat="'+data+'" class="ingredient">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 */

});

Answer 2

$(this).remove();

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

您需要使用委托事件：

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

试试吧。它会将事件委托给.selectedStuff div中包含的任何span元素。最好让你的“X”跨度像<span class="deleteButton">X</span>这样的类，以使这项工作更好，然后你可以使用：

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

Answer 3

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

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

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

这将删除外部div。

你最好这样做。

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

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

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

希望有所帮助！

Answer 4

如果问题仍然存在......而不是考虑.... Shouting Code。我发现了很好的解释

这是因为Jquery Click函数在动态添加数据方面行为不端，因为DOM中没有这些引用。

解决方案： -

只需点击span即可调用方法像那样

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

可以删除元素的方法

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

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

4 个答案: