使用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。

这会删除divs和element-3

的element-4

$(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>