CODEWITHSUNDEEP
javascriptjqueryhtml
Pavlo Zhukov
Pavlo Zhukov

Reputation: 3337

Delete elements below some element using jQuery

I've next code:

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

Is it possible to do action deleteElementsBelow by native jQuery API?

Upvotes: 0

Views: 208

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You could use something like $(parentContainerSelector + " ." +deleteBelowSelector).nextAll("div").remove() to remove all div after the target element.

This will remove divs with class element-3 and 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>

Upvotes: 1

Related Questions