Jquery 如何在添加类后从DOM中删除元素

这是使用Sizzle/jQuery。在添加一个类以使元素从GUI中“移除”动画化之后，我试图从DOM中移除元素（.offers detail）。简言之，我有一系列垂直列出的div。每个.offers detail div都有一个“删除”按钮。单击“删除”按钮时，我使用jQuery检查剩余的.offers detail div的数量，并根据该数量执行一些操作。在执行这些检查之后，我想添加类并将div的高度设置为0（零），然后我想将包含单击的移除按钮的offers detail div从DOM中完全移除

我可以运行检查或将div设置为零高度，但不能执行检查并将其从DOM中删除。如果我只使用.remove，则会从DOM中删除父div，但我无法让它们一起工作。下面只是我尝试过的一个例子-.delay（）和.remove（）。这将生成一个错误，说明“UncaughtTypeError:undefined不是函数”

感谢您的帮助

$(".icon").on("click", function () {
        var numOffers = $( '.offers-detail' ).length;

        $(this).closest('.offers-detail').addClass('active').delay(500).remove();

        // Show alert if max (5) number of offers entered
        if (numOffers == 5) {
            $('span.offers-alert').show();

        // Hide alert if more than 1 and less than 5
        } else if (numOffers >= 1 && numOffers <= 4) {
            $('span.offers-alert').hide();
            // Show offer code text input
            $('.offer-code').show();

            // Change verbiage if no offer codes present/entered
        } else if (numOffers == 0) {
            $('h4.applied-codes').replaceWith('no offer codes entered');
            $('.offer-code').show();
        } 
});

$（.icon”）。在（“单击”上，函数（）{
var numOffers=$（'.offers detail'）.length；
$（this）.closest（'.offers detail'）.addClass（'active'）.delay（500）.remove（）；
//如果输入最多（5）个报价，则显示警报
如果（numOffers==5）{
$（'span.offers alert'）.show（）；
//如果大于1且小于5，则隐藏警报
}如果（numOffers>=1&&numOffers），则为else
.remove（）从DOM中删除指定的元素

编辑：
将脚本更改为

$(".icon").on("click", function () {
    var numOffers = $( '.offers-detail' ).length;
    $(this).closest('.offers-detail').addClass('active').remove();
    numOffers = $( '.offers-detail' ).length;
    // Show alert if max (5) number of offers entered
    if (numOffers == 5) {
        $('span.offers-alert').show();

    // Hide alert if more than 1 and less than 5
    } else if (numOffers >= 1 && numOffers <= 4) {
        $('span.offers-alert').hide();
        // Show offer code text input
        $('.offer-code').show();

        // Change verbiage if no offer codes present/entered
    } else if (numOffers == 0) {
        $('h4.applied-codes').replaceWith('no offer codes entered');
        $('.offer-code').show();
    } 
});

$（.icon”）。在（“单击”上，函数（）{
var numOffers=$（'.offers detail'）.length；
$（this）.closest（'.offers detail'）.addClass（'active'）.remove（）；
numOffers=$（'.offers detail'）。长度；
//如果输入最多（5）个报价，则显示警报
如果（numOffers==5）{
$（'span.offers alert'）.show（）；
//如果大于1且小于5，则隐藏警报
}否则，如果（numofers>=1&&numofers我会在您的情况下使用setTimeout，替换此行：

$(this).closest('.offers-detail').addClass('active').delay(500).remove();

对于这些人：

var $item = $(this).parents('.offers-detail');
$item.addClass('active');

setTimeout(function() { $item.remove(); }, 5000);

通过这种方式，它添加类，等待5秒钟，然后删除元素

JSFiddle：

试一试，如果有帮助，请告诉我！
解决方案是根据上面的Everton Lenger的回答添加一个短的setTimeout。这允许动画发生，然后将div从DOM中删除。
谢谢。我不是要删除该类，我是要从DOM中删除整个div。我已经尝试了
。删除
r添加创建动画的类，但它不起作用。我想您误解了，.remove（）不会删除类，而是删除应用该类的整个div。要删除类，有.removeClass（）。在答复中缺少括号-->（）。请使用remove（）正确地说，它可以工作。您是正确的，我确实误解了。但是，问题是在应用addClass并执行其他if/else语句后从dom中删除元素。此时使用
.remove
会导致错误。正如您从上面的示例代码中看到的，我尝试添加该类，延迟了.5秒s，然后删除。这不起作用。我最新的工作是
设置超时
，然后检查
hasClass
，如果有，则执行
。删除
。它还会在检查器中生成错误。“未定义不是函数”。您可以提供html以获得更多说明吗？我添加了html。谢谢！您的示例没有为我生成任何错误：。抱歉。此版本没有错误，但也不能按预期/预期工作。它从DOM中删除元素，但不会延迟，也不会设置动画。延迟不是必需的，但肯定需要在r之前设置动画从DOM中移除。成功了！我很确定我可以解决其他一些问题，但现在它可以动画化和删除。这是主要目标。谢谢！很高兴这有帮助！：）
$(this).closest('.offers-detail').addClass('active').delay(500).remove();

var $item = $(this).parents('.offers-detail');
$item.addClass('active');

setTimeout(function() { $item.remove(); }, 5000);