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

Question

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

我已经能够运行检查或将div设置为零高度，但不执行检查并将其从DOM中删除。如果我只使用.remove，那么父div将从DOM中删除，但我不能让它们一起工作。下面只是我尝试过的一个例子 - .delay（）然后是.remove（）。这会产生一个错误，说“未捕获的TypeError：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();
        } 
});

这是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>

Answer 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/

尝试一下，让我知道它是否有帮助！

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

Answer 3

解决方案是根据埃弗顿伦格的答案在上面添加一个简短的setTimeout。这允许动画发生，然后将div从DOM中删除。