javascript - jQuery.remove() 删除错误的元素

Question

我正在尝试制作这样的营养标签:Example

目前我的数据库已经全部设置好了。我现在正在努力让它做一件事，然后再做其他事情。

我的数据库看起来像:

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

我现在遇到的问题很大。在过去的 3 天里，我一直坚持使用它，似乎没有人知道出了什么问题。我创建了一个 ever div 交叉，以便用户可以删除他添加的成分。所以如果他们有:

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

假设他们不再想要芒果，那么它应该看起来像:

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

但是我无法让它工作。每次我点击十字架时，它都会删除所有内容，什么也不留下。

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返回的数据, because for example, when Banana is selected, it returns <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 */

});