$("#prop-info-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '<div ><div ><p style="font-weight: 600;">Property Type</p></div><div ><select name="property-types" id="property-types"><option value="volvo">Tenament</option><option value="saab">Car</option><option value="opel" selected>Helicopter</option><option value="audi">Space Shuttle</option></select><div ><span  id="basic-addon1">OR</span><input type="text"  id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off"></div></div><div ><input type="text" id="prop-name"  placeholder="Property Name"></div><div ><input type="text" id="prop-address"  placeholder="Property Address"></div></div>';
  $("#toggle-content-add-modal").html(output);
});

$("#img-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '<!-- UPLOAD IMAGE SECTION --><div id="uploadArea" ><!-- Header --><div ><h1 >Upload your file</h1><p >File should be an image<strong >Like<span ></span><!-- Data Will Come From Js --></strong></p></div><!-- End Header --><!-- Drop Zoon --><div id="dropZoon" ><span ><i ></i></span><p >Drop your file here or Click to browse</p><span id="loadingText" >Please Wait</span><img src="" alt="Preview Image" id="previewImage"  draggable="false"><input type="file" id="fileInput"  accept="image/*"></div><!-- End Drop Zoon --><!-- File Details --><div id="fileDetails" ><div id="uploadedFile" ><div ><i ></i><span ></span><!-- Data Will be Comes From Js --></div><div id="uploadedFileInfo" ><span >Project 1</span><span >0%</span></div></div></div><!-- End File Details --></div></div><!-- End Upload Area -->';
  $("#toggle-content-add-modal").html(output);
});

$(function () {
    $(".side-nav li").click(function (e) {
        e.preventDefault();
        $(".side-nav li").removeClass("active");
        $(this).addClass("active");
    });
});

/* Add property modal */

.add-property {
  position: relative;
  width: 60rem;
  height: 35rem;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 15px;
}

.modal-title {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.close {
  background-color: transparent;
  border: none;
}

#footer-btn {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0.1em solid black;
  border-radius: 10px;
  width: 5em;
  height: 2.5em;
  font-weight: 600;
  margin-bottom: 1.2em;
}

.add-prop {
  background-color: #3498db;
  color: white;
}

.add-prop:hover {
  background-color: rgb(12, 65, 180);
}

.add-inpt {
  outline: none;
  border-width: 0 0 0.17em;
  border-color: black;
  border-radius: 5px;
  width: 15em;
  height: 2em;
  text-align: center;
}

.prop-info-row {
  height: 15em;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prop-info-col {
  height: 2em;
}

.add-inpt::placeholder {
  text-align: center;
}

.main-add-row {
  width: 50rem;
  height: 26rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
  background-color: white;
  height: 2.5em;
  width: 13em;
  border-radius: 5px;
}

/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
    height: 100%;
}

.side-nav .nav-menu {
    list-style: none;
    padding: 40px 0;
    width: 13em;
    background-color: #3498db;

}

.side-nav .nav-item {
    position: relative;
    padding: 0.7em 1.5em;
    position: relative;
    top: 42%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item.active {
    background-color: #fff;
    box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
    color: #2980b9;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
}

.menu-text {
    padding: 0 20px;
}

.side-nav .nav-item.active::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff;
}

/* UPLOAD IMAGE STYLE */
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
}

/* End General Styles */

/* Upload Area */
.upload-area {
    width: 100%;
    max-width: 25rem;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px rgb(218, 229, 255);
    border: 2px solid var(--clr-light-blue);
    border-radius: 24px;
    padding: 1rem 1.875rem 0rem 1.875rem;
    margin: 0.625rem;
    text-align: center;
}

/* Header */
.upload-area__title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin-top: 0;
}

.upload-area__tooltip {
    position: relative;
    color: var(--clr-light-blue);
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
    color: var(--clr-blue);
}

.upload-area__tooltip-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    min-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    border: 1px solid var(--clr-light-blue);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: none 300ms ease-in-out;
    transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
    opacity: 1;
    visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
    position: relative;
    height: 13.8rem;
    /* 180px */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px dashed var(--clr-light-blue);
    border-radius: 15px;
    margin-top: 1.1rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
    border-color: var(--clr-blue);
}

.drop-zoon__icon {
    display: flex;
    font-size: 3.75rem;
    color: var(--clr-blue);
    transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin: 0;
    margin-top: 0.625rem;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
    opacity: 0.7;
}

.drop-zoon__loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: var(--clr-light-blue);
    z-index: 10;
}

.drop-zoon__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3125rem;
    border-radius: 10px;
    display: none;
    z-index: 1000;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
    opacity: 0.8;
}

.drop-zoon__file-input {
    display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
    border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
    opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
    display: none;
}

/* File Details Area */
.upload-area__file-details {
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transition: none 500ms ease-in-out;
    transition-property: opacity, visibility;
    transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* Uploaded File */
.uploaded-file {
    display: flex;
    align-items: center;
    padding: 0.925rem 0;
    visibility: hidden;
    opacity: 0;
    transition: none 500ms ease-in-out;
    transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
    visibility: visible;
    opacity: 1;
}

.uploaded-file__icon-container {
    position: relative;
    margin-right: 0.3125rem;
}

.uploaded-file__icon {
    font-size: 3.4375rem;
    color: var(--clr-blue);
}

.uploaded-file__icon-text {
    position: absolute;
    top: 1.5625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-white);
}

.uploaded-file__info {
    position: relative;
    top: -0.3125rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
    content: '';
    position: absolute;
    bottom: -0.9375rem;
    width: 0;
    height: 0.5rem;
    background-color: #ebf2ff;
    border-radius: 0.625rem;
}

.uploaded-file__info::before {
    width: 100%;
}

.uploaded-file__info::after {
    width: 100%;
    background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
    animation: progressMove 800ms ease-in-out;
    animation-delay: 300ms;
}

@keyframes progressMove {
    from {
        width: 0%;
        background-color: transparent;
    }

    to {
        width: 100%;
        background-color: var(--clr-blue);
    }
}

.uploaded-file__name {
    width: 100%;
    max-width: 6.25rem;
    /* 100px */
    display: inline-block;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-file__counter {
    font-size: 1rem;
    color: var(--clr-light-gray);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty"  id="add-property">Add
            Property</button>

<!-- Modal window for Add Property button -->
<form action="">
  <div  id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div  role="document">
      <div >
        <div >
          <h5  id="exampleModalLongTitle">Add Property</h5>
          <button type="button"  data-bs-dismiss="modal" aria-label="Close">
                            <i ></i>
                        </button>
        </div>
        <div  style="padding: 0;">
          <div >

            <div  style="padding: 0;">
              <nav >
                <ul >
                  <li  id="img-nav-link">
                    <a href="#">
                      <i ></i>
                      <span >Upload Image</span>
                    </a>
                  </li>
                  <li  id="prop-info-nav-link">
                    <a href="#">
                      <i ></i>
                      <span >Propery Info</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>


            <div  id="toggle-content-add-modal">
              <!-- UPLOAD IMAGE SECTION -->
              <div id="uploadArea" >
                <!-- Header -->
                <div >
                  <h1 >Upload your file</h1>
                  <p >
                    File should be an image
                    <strong >
                                                Like
                                                <span ></span>
                                                <!-- Data Will Come From Js -->
                                            </strong>
                  </p>
                </div>
                <!-- End Header -->

                <!-- Drop Zoon -->
                <div id="dropZoon" >
                  <span >
                                            <i class='bx bxs-file-image'></i>
                                        </span>
                  <p >Drop your file here or Click to browse</p>
                  <span id="loadingText" >Please Wait</span>
                  <img src="" alt="Preview Image" id="previewImage"  draggable="false">
                  <input type="file" id="fileInput"  accept="image/*">
                </div>
                <!-- End Drop Zoon -->

                <!-- File Details -->
                <div id="fileDetails" >
                  <div id="uploadedFile" >
                    <div >
                      <i class='bx bxs-file-blank uploaded-file__icon'></i>
                      <span ></span>
                      <!-- Data Will be Comes From Js -->
                    </div>
                    <div id="uploadedFileInfo" >
                      <span >Project 1</span>
                      <span >0%</span>
                    </div>
                  </div>
                </div>
                <!-- End File Details -->
              </div>
            </div>
            <!-- End Upload Area -->

          </div>
        </div>
        <div >
          <button type="submit"  id="footer-btn" data-bs-dismiss="modal">Add</button>
        </div>
      </div>
    </div>
  </div>
</form>

The modal looks like this:

When I click on the Property Info, all the child elements in the a column: #toggle-content-add-modal related to Upload Image is deleted with the help of $("#toggle-content-add-modal").empty() and replaced by the elements related to Property Info.

This .empty() and and .html() is, in a way toggled when clicking respective nav-links (Upload Image and Property Info). But the data I entered like uploading the image or any information in the Property Info gets deleted also. I know .empty() specifically does that. But I cant find any other option in which the data is stored when toggling between nav-links.

CodePudding user response：

If all you need is to just "toggle" some sections, then there is no need to manually add and remove anything from the DOM. You can do this instead

• First, add all the sections to the page.
• Hide the ones you don't want to make visible when the page loads.
• Add data-target="id-of-targeted-side-nav-li" to each section.

Try this

$(function () {
    $(".side-nav li").click(function (e) {
        e.preventDefault();
        let id = $(this).attr('id');

        // toggle sidebar nav
        $(".side-nav li").removeClass("active");
        $(this).addClass("active");

        // toggle sidebar nav target
        $('#toggle-content-add-modal')
            .children().hide()
            .filter((i, elem) => $(elem).data('target') === id)
            .show();
    });
});

/* Add property modal */

.add-property {
    position: relative;
    width: 60rem;
    height: 35rem;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 15px;
}

.modal-title {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.close {
    background-color: transparent;
    border: none;
}

#footer-btn {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 0.1em solid black;
    border-radius: 10px;
    width: 5em;
    height: 2.5em;
    font-weight: 600;
    margin-bottom: 1.2em;
}

.add-prop {
    background-color: #3498db;
    color: white;
}

.add-prop:hover {
    background-color: rgb(12, 65, 180);
}

.add-inpt {
    outline: none;
    border-width: 0 0 0.17em;
    border-color: black;
    border-radius: 5px;
    width: 15em;
    height: 2em;
    text-align: center;
}

.prop-info-row {
    height: 15em;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.prop-info-col {
    height: 2em;
}

.add-inpt::placeholder {
    text-align: center;
}

.main-add-row {
    width: 50rem;
    height: 26rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
    background-color: white;
    height: 2.5em;
    width: 13em;
    border-radius: 5px;
}

/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
    height: 100%;
}

.side-nav .nav-menu {
    list-style: none;
    padding: 40px 0;
    width: 13em;
    background-color: #3498db;

}

.side-nav .nav-item {
    position: relative;
    padding: 0.7em 1.5em;
    position: relative;
    top: 42%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item.active {
    background-color: #fff;
    box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
    color: #2980b9;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
}

.menu-text {
    padding: 0 20px;
}

.side-nav .nav-item.active::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff;
}

/* UPLOAD IMAGE STYLE */
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
}

/* End General Styles */

/* Upload Area */
.upload-area {
    width: 100%;
    max-width: 25rem;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px rgb(218, 229, 255);
    border: 2px solid var(--clr-light-blue);
    border-radius: 24px;
    padding: 1rem 1.875rem 0rem 1.875rem;
    margin: 0.625rem;
    text-align: center;
}

/* Header */
.upload-area__title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin-top: 0;
}

.upload-area__tooltip {
    position: relative;
    color: var(--clr-light-blue);
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
    color: var(--clr-blue);
}

.upload-area__tooltip-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    min-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    border: 1px solid var(--clr-light-blue);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: none 300ms ease-in-out;
    transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
    opacity: 1;
    visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
    position: relative;
    height: 13.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px dashed var(--clr-light-blue);
    border-radius: 15px;
    margin-top: 1.1rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
    border-color: var(--clr-blue);
}

.drop-zoon__icon {
    display: flex;
    font-size: 3.75rem;
    color: var(--clr-blue);
    transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin: 0;
    margin-top: 0.625rem;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
    opacity: 0.7;
}

.drop-zoon__loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: var(--clr-light-blue);
    z-index: 10;
}

.drop-zoon__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3125rem;
    border-radius: 10px;
    display: none;
    z-index: 1000;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
    opacity: 0.8;
}

.drop-zoon__file-input {
    display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
    border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
    opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
    display: none;
}

/* File Details Area */
.upload-area__file-details {
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transition: none 500ms ease-in-out;
    transition-property: opacity, visibility;
    transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* Uploaded File */
.uploaded-file {
    display: flex;
    align-items: center;
    padding: 0.925rem 0;
    visibility: hidden;
    opacity: 0;
    transition: none 500ms ease-in-out;
    transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
    visibility: visible;
    opacity: 1;
}

.uploaded-file__icon-container {
    position: relative;
    margin-right: 0.3125rem;
}

.uploaded-file__icon {
    font-size: 3.4375rem;
    color: var(--clr-blue);
}

.uploaded-file__icon-text {
    position: absolute;
    top: 1.5625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-white);
}

.uploaded-file__info {
    position: relative;
    top: -0.3125rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
    content: '';
    position: absolute;
    bottom: -0.9375rem;
    width: 0;
    height: 0.5rem;
    background-color: #ebf2ff;
    border-radius: 0.625rem;
}

.uploaded-file__info::before {
    width: 100%;
}

.uploaded-file__info::after {
    width: 100%;
    background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
    animation: progressMove 800ms ease-in-out;
    animation-delay: 300ms;
}

@keyframes progressMove {
    from {
        width: 0%;
        background-color: transparent;
    }

    to {
        width: 100%;
        background-color: var(--clr-blue);
    }
}

.uploaded-file__name {
    width: 100%;
    max-width: 6.25rem;
/* 100px */
display: inline-block;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.uploaded-file__counter {
    font-size: 1rem;
    color: var(--clr-light-gray);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty"  id="add-property">Add
            Property</button>

<!-- Modal window for Add Property button -->
<form action="">
    <div  id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <h5  id="exampleModalLongTitle">Add Property</h5>
                    <button type="button"  data-bs-dismiss="modal" aria-label="Close">
                        <i ></i>
                    </button>
                </div>
                <div  style="padding: 0;">
                    <div >
                        <div  style="padding: 0;">
                            <nav >
                                <ul >
                                    <li  id="img-nav-link">
                                        <a href="#">
                                            <i ></i>
                                            <span >Upload Image</span>
                                        </a>
                                    </li>
                                    <li  id="prop-info-nav-link">
                                        <a href="#">
                                            <i ></i>
                                            <span >Propery Info</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div  id="toggle-content-add-modal">
                            <!-- UPLOAD IMAGE SECTION -->
                            <div id="uploadArea"  data-target="img-nav-link">
                                <!-- Header -->
                                <div >
                                    <h1 >Upload your file</h1>
                                    <p >
                                        File should be an image
                                        <strong >
                                            Like
                                            <span ></span>
                                            <!-- Data Will Come From Js -->
                                        </strong>
                                    </p>
                                </div>
                                <!-- End Header -->

                                <!-- Drop Zoon -->
                                <div id="dropZoon" >
                                    <span >
                                        <i class='bx bxs-file-image'></i>
                                    </span>
                                    <p >Drop your file here or Click to browse</p>
                                    <span id="loadingText" >Please Wait</span>
                                    <img src="" alt="Preview Image" id="previewImage"  draggable="false">
                                    <input type="file" id="fileInput"  accept="image/*">
                                </div>
                                <!-- End Drop Zoon -->

                                <!-- File Details -->
                                <div id="fileDetails" >
                                    <div id="uploadedFile" >
                                        <div >
                                            <i class='bx bxs-file-blank uploaded-file__icon'></i>
                                            <span ></span>
                                            <!-- Data Will be Comes From Js -->
                                        </div>
                                        <div id="uploadedFileInfo" >
                                            <span >Project 1</span>
                                            <span >0%</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- End File Details -->
                            </div>
                            <!-- End Upload Area -->

                            <!-- Prop Info Section -->
                            <div  data-target="prop-info-nav-link" style="display: none;">
                                <div >
                                    <p style="font-weight: 600;">Property Type</p>
                                </div>
                                <div >
                                    <select name="property-types" id="property-types">
                                        <option value="volvo">Tenament</option>
                                        <option value="saab">Car</option>
                                        <option value="opel" selected>Helicopter</option>
                                        <option value="audi">Space Shuttle</option>
                                    </select>
                                    <div >
                                        <span  id="basic-addon1">OR</span>
                                        <input type="text"  id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">
                                    </div>
                                </div>
                                <div >
                                    <input type="text" id="prop-name"  placeholder="Property Name">
                                </div>
                                <div >
                                    <input type="text" id="prop-address"  placeholder="Property Address">
                                </div>
                            </div>
                            <!-- End Prop Info Section -->
                        </div>
                    </div>
                </div>
                <div >
                    <button type="submit"  id="footer-btn" data-bs-dismiss="modal">Add</button>
                </div>
            </div>
        </div>
    </div>
</form>

CodePudding user response：

You can keep the child elements you're removing by using children and detach:

const children = $("#toggle-content-add-modal").children().detach();

That removes them from the document but returns a jQuery object containing them, so you can put them back later with append.

Here's a simplified example:

$("input[type=text]").on("change input", (e) => {
    $("#echo").text(e.currentTarget.value);
});

let children = null;
$("input[type=button]").on("click", () => {
    if (children) {
        $("#container").append(children);
        children = null;
    } else {
        children = $("#container").children().detach();
    }
});

.echo {
    border: 1px solid black;
    padding: 4px;
    min-height: 1em;
}

<input type="button" value="Toggle">
<div>
Type something in the input box below, which will be echoed to a div under it, and then use the toggle button above to show removing and restoring the content (including the input's value and the "echo" div's text):
</div>
<hr>
<div id="container">
    <div>
        <label>
            Type something here:
            <input type="text" value="">
        </label>
    </div>
    <div>
        You've typed:
        <div id="echo"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>