Как удалить элемент, добавленный после вызова AJAX в jQuery?

Question

Я пытаюсь удалить элемент HTML, добавленный на мою страницу по возвращении из вызова AJAX. Но jQuery, похоже, не знает о таких динамически добавляемых элементах.Любые решения?

Контекст :

• Я создаю упрощенную корзину для покупок.
• Когда пользователь нажимает кнопку «Добавить»Я добавляю элемент в базу данных и хочу отобразить его на экране без перезагрузки страницы.
• Но , поскольку пользователь может нажимать «Добавить» несколько раз для одного и того же элемента в сеансе покупок, каждый раз, когда он нажимает, я хочу удалить любые строки этого элемента из корзины покупок.DIV, и оставьте только самый последний для этого элемента.

Сейчас он не работает, поэтому мой HTML выглядит так после нескольких добавлений:

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

MyjQuery выглядит так:

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

Я искал на форумах и не нашел соответствия для своего вопроса.Кроме того, я новичок в этом, поэтому, пожалуйста, примите глупость.Благодарю.

Answer 1

Спасибо за всю вашу помощь, ребята, это определенно помогло мне отладить это!

В конце концов, проблема заключалась в том, что у некоторых кодов элементов был период ("shirt235.b"), и у jQuery возникла проблема с поиском того, что если период не экранирован ( Это в FAQ. ).

Мне очень жаль, что я использовал вымышленный пример для простоты, думая, что не имеет значения, что это за item_code ... Я усвоил урок и только опубликует реальный код впредь! Пожалуйста, примите мои извинения и спасибо за ваше понимание.

Хорошей недели!

Answer 2

Похоже, что это должно работать в большинстве случаев, но под ним может быть следующее условие гонки:

Представьте себе, если пользователь дважды щелкает по add, а затем браузер получает и запускает обе функции обратного вызова параллельно.

Обратные вызовы не являются атомарными, они могли бы оба завершить функцию «удалить», прежде чем любой из них выполнит функцию «prepend».В этом случае вам нужно добавить два дубликата.

Одним из решений может быть использование какой-либо очереди ajax или использование переменной для имитации «блокировки».

Answer 3

Вроде новичок, но несколько одинаковых идентификаторов - это плохо.Попробуйте использовать .attr ('data-id', item_code) для селектора или создайте уникальные идентификаторы.

Answer 4

Я думаю, что val () работает только для элементов формы, поэтому вы не получаете верного возврата при вызове его для элемента абзаца; таким образом, ваш селектор ничего не выбирает.

Для отладки попробуйте вывести результат val () (переменная item_code), а также посмотреть, что возвращает длина селектора.