JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

JavaScript

$(function () {
    $('#delete-button').click(function () {
        deleteElementsBelow('#parent-container');
    });
    
    function deleteElementsBelow(parentContainerSelector) {
        var save = $('#parent-container #delete-button').detach();
				$(parentContainerSelector).empty().append(save);
   	}
});