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

Question

这正在使用 Sizzle/jQuery。我正在尝试从 DOM 中删除元素 (.offers-detail) 在 添加 class 以从 GUI 动画化它的 'removal' .简而言之，我有一系列的 div 垂直列出。每个 .offers-detail div 都有一个 'remove' 按钮。单击删除按钮后，我使用 jQuery 检查剩余的 .offers-detail div 的数量，并根据该数量做一些事情。执行并执行这些检查后，我想添加类并将 div 的高度设置为 0（零），然后我想要包含删除按钮的优惠详情 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>-.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>-.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>-.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>-.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>-.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

$('.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 2

我会在你的情况下使用 setTimeout，替换这一行：

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

对于这些：

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

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

这样，它添加了class，等待5秒，然后删除元素。

JSFiddle：http://jsfiddle.net/553hajj0/3/

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

Answer 3

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

中删除

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

How to remove element from DOM after class has been added

jquery

sizzle