Bootstrap Modal refresh after closing

Question

I got a button which does the following: When click, a modal pop up will open. On the modal popup there's another button which when click it will show another 2 textboxes and 2 buttons. What I want is that when I click close or simply close the modal, I want it to be on the previous state which contains 2 labels and the add button.

These are my javascript code:

//this shows the additional textboxes and buttons        
$( "#toggle" ).click(function()
{
   $( "#content" ).toggle("slow");
   $( "#divButtons" ).toggle();
   $("#toggle").hide();
});
//this is where i tried to refresh the modal back to its original state
$(function () {
    $(document).on("hidden.bs.modal", "#exampleModal", function () {
        $(this).find("#content").remove(); // Remove from DOM.
        $(this).find("#divButtons").remove();
        $("#toggle").show();
        $(this).find("#portValue").html("");
        $(this).find("#hostValue").html("");
    });
});

This is what i have done so far: Demo

The problem with my code is that when i close the modal, then click the add button again, it removes the button and the 2 textboxes and 2 buttons doesn't show.

Answer 1

It removes the button because you are removing your #content from the DOM entirely using this line $(this).find("#content").remove(); inside the "hidden.bs.modal" event. Hence next time when you click on the "Add new value" button, there is no #content to show because it doesn't exist anymore .

Firstly remove that line $(this).find("#content").remove(); .

Second, add the below code to toggle the textboxes when you click the "Cancel" button. Let the modals "x"(close icon) do its job otherwise there would be no way to actually close the modal if the user needs.

$( "#btnCancel" ).click(function() {
    $( "#content" ).toggle("slow");
    $( "#divButtons" ).toggle();
    $("#toggle").show();
});

Update:

To hide the textboxes & buttons on modal close, all you need is to just add the line $( "#content" ).hide(); inside the $(document).on("hidden.bs.modal", event. This is only to hide the 2 textboxes since there is a code you have written already to hide the buttons.