How to remove an item added after an AJAX call in jQuery?

Question

I am trying to remove an HTML element added to my page after returning from an AJAX call. But jQuery does not seem to know about such dynamically added elements. Any solutions?

Context :

• I am creating a simplified shopping cart.
• When the user clicks the Add button, I add the item to the database. I want to display it on the screen without reloading the page.
• But , since the user can click "Add" several times for the same item in the shopping session, every time he clicks, I want to remove any lines of this item from the DIV shopping cart, and save only the most recent for this item.

This does not work at the moment, so my HTML looks like this after a few additions:

<div id="CartList"> <p id="Item_shirt7363">shirt7363</p> <p id="Item_shirt7363">shirt7363</p> <p id="Item_shirt7363">shirt7363</p> </div> 

My jQuery looks like this:

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

I searched the forums and did not find a match for my question. Also, I am new to this, so please accept stupidity. Thank you

Answer 1

Thanks for all your help guys, it definitely helped me debug this!

In the end, the problem was that some element codes had a period in them ("shirt235.b"), and jQuery detects a problem if the period is not escaped ( This is in the FAQ. ).

I am very sorry that I used a fictitious example for simplicity, considering that it does not matter what item_code is ... I learned my lesson and will only publish the real world code from now on! Please accept my apologies and thank you for your understanding.

Spend a great week!

Answer 2

I think val () only works for form elements, so you don't get real income when you call it in a paragraph element; therefore, your selector does not select anything.

For debugging, try to output the result of val () (item_code variable), and also see how the length of the selector is returned.

Answer 3

It seems that it should work in most cases, but under it there may be the following race condition:

Imagine that the user double-clicks twice, and then receives a browser and simultaneously performs both callback functions.

Callbacks are not atomic; they can both complete the delete function before either of them executes the prepend function. In this case, you will have two duplicates.

One solution might be to use some kind of ajax queue or use a variable to simulate a “lock”.

Answer 4

Boring newbie, but a few identical IDs are bad. Try using .attr ('data-id', item_code) for the selector or create unique identifiers.