How to restore div which is hidden using empty() function-CodePudding

html code:
<button id="add"></button>    
<div id="count_search">
        <span >Total: <span id="record_count"></span></span></span>
        <input type="text"  placeholder="Search" id="search">
    </div>
Jquery code:
$("#add").click(function(){
       $("#count_search").empty();
})

I want to show count_search div once again on clicking on any other button execpt to add button In above code add is button on which empty() is implimented. On clicking on add button count_search is got hide. Then after I want to restore that div content

CodePudding user response：

.empty() deletes the elements in your container (count_search). Instead, you can use .hide()/.show() or better approach, you can use .toggle() that show or hide your element.

$("#add2").click(function() {
    $("#count_search").toggle();
});
$("#add").click(function() {

    if ($("#count_search").is(":visible")) {
        $("#count_search").hide();
    } else {
        $("#count_search").show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Show/Hide</button>    
<button id="add2">Toggle</button>    
<div id="count_search">
   <span >Total: <span id="record_count"></span></span></span>
   <input type="text"  placeholder="Search" id="search">
</div>

CodePudding user response：

By empty() you are deleting an item in DOM.
Instead of empty, you can use toggle(), which hides the element and If you click once again, the item will show.

$("#add").click(function(){
       $("#count_search").hide();
})