JQuery.remove () removing the wrong item

Question

Hi guys, so I'm trying to make a nutrtrion label like this: Example

You always have my db. trying to get him to work in one place at a given moment, and then do it with the rest.

My db looks like this:

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

The problem that I have now is huge. I stuck on it for the last 3 days and no one seems to know what happened, I have a cross from an ever div that is created so that the user can delete this ingredient that he added. Therefore, if they have:

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

Suppose they no longer want a mango, then it should look like Apple: 1 g Mango: 2 g Total: 3g

However, I cannot get this to work. Each time I click on the cross, it removes everything and leaves nothing. Therefore, please, any help in this will be a huge help. Starting from my code with this code.

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> 

My site:

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

Edit: now you see how guys only clean -1 every time I delete a div, and not the amount that I set in the database? This is a big part of the problem that I'm stuck on

Answer 1

How do you show the selected ingredients?

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

Correct the returned data from build.php , because, for example, when the Banana function is selected, it returns <script>$(" #fat').html(3);<="" script="">4' , therefore 4' data-itemfat='4'>X displayed. Make sure that it returns only the id ingredient! There are no HTML elements or not at all.

Not sure if appendTo() is the right choice for displaying data, but I would recommend you try append() . Read more about the difference here . And add a class tag for your <span> to tag them:

 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>'); 

Then, your script to remove the ingredient:

 $(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(); 

You delete everything because "this" refers to ".selectedStuff", which is a div containing everything.

Instead, you need to use a delegated event:

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

Give it a try. It delegates events to any span element contained in div.selectedStuff. It would be better to give your class “X” a class like <span class="deleteButton">X</span> to make this work better, then you can use:

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

Answer 3

The problem is that you select the div container, not the elements in the event handler.

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

This will remove the outer div.

You better do it like this.

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

Which will remove the closest div element when you click on the span in the .selectedStuff element.

Hope this helps!

Answer 4

if the problem persists .... than to consider .... Screaming code . I found a good explanation there.

• This is because the Jquery Click function does not work correctly for dynamically added data because these links were not present in the DOM.

Decision: -

Just call the method by pressing a button like this

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

method that can remove an item

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