使用jQuery删除某些元素下面的元素

Question

我的下一个代码是：

​

$(function () {
    $('#delete-button').click(function () {
        deleteElementsBelow('#parent-container', 'element-2');
    });
    
    function deleteElementsBelow(parentContainerSelector, deleteBelowSelector) {
        var deleteOthers = false;
        $(parentContainerSelector).children().each(function () {
            var $elem = $(this);

            if (deleteOthers) {
                $elem.remove();
            } else if ($elem.hasClass(deleteBelowSelector)) {
                deleteOthers = true;
            }
        });
    }
});

#parent-container div {
    background-color: red;
    width: 20px;
    height: 20px;
    margin: 10px;
}

#parent-container div:nth-child(2n) {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-container">
    <div class="element-1"></div>
    <div class="element-2"></div>
    <div class="element-3"></div>
    <div class="element-4"></div>
    <button id="delete-button" type="button">Delete</button>
</div>

​

可以通过原生jQuery API执行操作deleteElementsBelow吗？

Answer 1

您可以使用诸如$(parentContainerSelector + " ." +deleteBelowSelector).nextAll("div").remove()之类的命令来删除目标元素后面的所有div。

这将删除类为element-3和element-4的divs

​

$(function () {
    $('#delete-button').click(function () {
        deleteElementsBelow('#parent-container', 'element-2');
    });
    
    function deleteElementsBelow(parentContainerSelector, deleteBelowSelector) {
        var deleteOthers = false;
        $(parentContainerSelector + " ." +deleteBelowSelector).nextAll("div").remove()
    }
});

#parent-container div {
    background-color: red;
    width: 20px;
    height: 20px;
    margin: 10px;
}

#parent-container div:nth-child(2n) {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-container">
    <div class="element-1"></div>
    <div class="element-2"></div>
    <div class="element-3"></div>
    <div class="element-4"></div>
    <button id="delete-button" type="button">Delete</button>
</div>

​