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

user_19165954 0
Viewed 35

html code:
<button id="add"></button>    
<div id="count_search">
        <span class="total_count">Total: <span id="record_count"></span></span></span>
        <input type="text" class="txtbox search" 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

jquery javascript
2 Answers

.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 class="total_count">Total: <span id="record_count"></span></span></span>
   <input type="text" class="txtbox search" placeholder="Search" id="search">
</div>

user_66352790

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();
})
user_139884070
Related