添加类后如何从DOM中删除元素答案

【问题标题】：How to remove element from DOM after class has been added添加类后如何从DOM中删除元素
【发布时间】：2015-01-26 16:37:38
【问题描述】：

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

我已经能够运行检查或将 div 设置为零高度，但不能执行检查并将其从 DOM 中删除。如果我只使用 .remove，则父 div 将从 DOM 中删除，但我无法让它们一起工作。下面只是我尝试过的一个示例 - .delay() 和 .remove()。这会生成一条错误消息“Uncaught TypeError: undefined is not a function”

感谢任何帮助。

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

这里是 HTML

<div class="offers-detail-max">
    <span class="offers-alert"><h4 class="red"><span class="icon red">alert</span> You've reached your max number of offers.</h4></span>
    <h4 class="applied-codes">applied offer codes</h4>

    <div class="offers-detail">
        <div class="gray-bg">
            <div class="description">
                <h4>shoe lover</h4>
            </div>
            <div class="amount">
                <h4>-$5.00 <span class="icon red">remove-circle</span></h4>
            </div>
        </div>
    </div>

    <div class="offers-detail">
        <div class="gray-bg">
            <div class="description">
                <h4>vet's day</h4>
            </div>
            <div class="amount">
                <h4>-$5.00 <span class="icon red">remove-circle</span></h4>
            </div>
        </div>
    </div>

    <div class="offers-detail">
        <div class="gray-bg">
            <div class="description">
                <h4>flower power</h4>
            </div>
            <div class="amount">
                <h4>-$5.00 <span class="icon red">remove-circle</span></h4>
            </div>
        </div>
    </div>

    <div class="offers-detail">
        <div class="gray-bg">
            <div class="description">
                <h4>black friday</h4>
            </div>
            <div class="amount">
                <h4>-$5.00 <span class="icon red">remove-circle</span></h4>
            </div>
        </div>
    </div>

    <div class="offers-detail">
        <div class="gray-bg">
            <div class="description">
                <h4>new years</h4>
            </div>
            <div class="amount">
                <h4>-$5.00 <span class="icon red">remove-circle</span></h4>
            </div>
        </div>
    </div>

<div class="offer-code">
    <h4>enter an offer code</h4>
    <input class="offercode" type="text" placeholder="Enter one code at a time" />
    <input class="primary" type="button" value="submit" />
</div>
</div>

【问题讨论】：

您的示例对我没有产生任何错误：jsfiddle.net/553hajj0/2.
道歉。此版本不会出错，但也无法按预期/预期工作。它从 DOM 中删除元素，但不会延迟，也不会设置动画。延迟不是必需的，但它肯定需要在从 DOM 中删除之前进行动画处理。

标签： jquery sizzle

【解决方案1】：

我会在你的情况下使用 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：http://jsfiddle.net/553hajj0/3/

试一试，如果有帮助，请告诉我！

【讨论】：

做到了！还有一些其他的错误，我很确定我可以解决，但现在它动画并删除了。那是主要目标。谢谢！
很高兴有帮助！ :)

【解决方案2】：

$('.className').remove();

.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();
    } 
});

【讨论】：

谢谢。我不是要删除类，而是要从 DOM 中删除整个 div。我在添加创建动画的类后尝试了.remove，但它不起作用。
我想你误解了，.remove() 不会删除类，而是应用该类的整个 div。删除类有 .removeClass()。在回复中您缺少括号->（）。正确使用 ,remove() ，它会起作用。
你是对的，我确实误会了。但是，问题是在应用了 addClass 并执行了其他 if/else 语句之后，从 dom 中删除了该元素。此时使用.remove 会导致错误。从上面的示例代码可以看出，我尝试添加类，延迟 0.5 秒然后删除。这不起作用。我最近的努力是setTimeout，然后检查hasClass，如果是，.remove。它还会在检查器中生成错误。 “未定义不是函数”。
您能否提供 html 以便更清楚
我添加了 HTML。谢谢！

【解决方案3】：

解决方案是根据上面 Everton Lenger 的回答添加一个简短的 setTimeout。这允许动画发生，然后从 DOM 中删除 div。

【讨论】：