Laden Sie das Bootstrap3 Modal mit dynamischen Daten

Question

Ich habe ein Modal, das zunächst zwei <div> Elemente enthält. Benutzer können jedoch dynamisch zusätzliche <div> Elemente hinzufügen.

Was ich tun möchte, ist nur die Standard zwei <div> s jedes Mal zeigen Modal ist geschlossen und wieder geöffnet.

habe ich versucht, die folgenden:

$('#modal').on('show.bs.modal', function() { 
    $(this).removeData('bs.modal'); 
}); 

Es half nicht.

Wie kann ich das tun?

Anfängliche modal Körper:

<div class="modal-body"> 
     <div class="row" id="leg-1"> 
      <div class="col-md-5" id="pickup-info-1"> 
       <div class="row"> 
        <div class="col-md-1"> 
         <p class="split-location__leg-number">1</p> 
        </div> 
        <div class="col-md-11"> 
         <p><span id="pickup-name-1"></span> <br/> <span id="pickup-address-1"></span> <br/> <strong><span id="pickup-city-1"></span>, <span id="pickup-state-1"></span> <span id="pickup-zip-1"></span></strong> <br/> Contact: <span id="pickup-contact-1"></span><br/> Phone: <span id="pickup-phone-1"></span></p> 
         <p id="pickup-date-1"></p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-7" id="delivery-info-1"> 
       <div class="row"> 
        <div class="col-md-10"> 
         <form class="split-location-form"> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-name-1" placeholder="Name" value="BusinessName"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-contact-1" placeholder="Contact" value="ContactName"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-phone-1" placeholder="Phone" value="+99893497989"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-address-1" placeholder="Address" value="ContactAddress"> 
          </div> 
          <div class="row"> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <input type="text" class="form-control" id="delivery-city-1" placeholder="City" value="ContactCity"> 
            </div> 
           </div> 
           <div class="col-md-3"> 
            <div class="form-group"> 
             <select class="form-control split-location__state" id="delivery-state-1"> 
              <option value="AL">Alabama</option> 
              <option value="AK">Alaska</option> 
              <option value="AS">American Samoa</option> 
              <option value="AZ">Arizona</option> 
              <option value="AR">Arkansas</option> 
              <option value="CA">California</option> 
              <option value="CO">Colorado</option> 
              <option value="CT">Connecticut</option> 
              <option value="DE">Delaware</option> 
              <option value="DC">District Of Columbia</option> 
              <option value="FM">Federated States Of Micronesia</option> 
              <option value="FL">Florida</option> 
              <option value="GA">Georgia</option> 
              <option value="GU">Guam</option> 
              <option value="HI">Hawaii</option> 
              <option value="ID">Idaho</option> 
              <option value="IL">Illinois</option> 
              <option value="IN">Indiana</option> 
              <option value="IA">Iowa</option> 
              <option value="KS">Kansas</option> 
              <option value="KY">Kentucky</option> 
              <option value="LA">Louisiana</option> 
              <option value="ME">Maine</option> 
              <option value="MH">Marshall Islands</option> 
              <option value="MD">Maryland</option> 
              <option value="MA">Massachusetts</option> 
              <option value="MI">Michigan</option> 
              <option value="MN">Minnesota</option> 
              <option value="MS">Mississippi</option> 
              <option value="MO">Missouri</option> 
              <option value="MT">Montana</option> 
              <option value="NE">Nebraska</option> 
              <option value="NV'">Nevada</option> 
              <option value="NH">New Hampshire</option> 
              <option value="NJ">New Jersey</option> 
              <option value="NM">New Mexico</option> 
              <option value="NY">New York</option> 
              <option value="NC'">North Carolina</option> 
              <option value="ND">North Dakota</option> 
              <option value="MP">Northern Mariana Islands</option> 
              <option value="OH">Ohio</option> 
              <option value="OK">Oklahoma</option> 
              <option value="OR">Oregon</option> 
              <option value="PW">Palau</option> 
              <option value="PA">Pennsylvania</option> 
              <option value="PR">Puerto Rico</option> 
              <option value="RI">Rhode Island</option> 
              <option value="SC">South Carolina</option> 
              <option value="SD">South Dakota</option> 
              <option value="TN">Tennessee</option> 
              <option value="TX">Texas</option> 
              <option value="UT">Utah</option> 
              <option value="VT">Vermont</option> 
              <option value="VI">Virgin Islands</option> 
              <option value="VA">Virginia</option> 
              <option value="WA">Washington</option> 
              <option value="WV">West Virginia</option> 
              <option value="WI">Wisconsin</option> 
              <option value="WY">Wyoming</option> 
             </select> 
            </div> 
           </div> 
           <div class="col-md-3"> 
            <div class="form-group"> 
             <input type="number" class="form-control split-location__zip" id="delivery-zip-1" placeholder="ZIP" value="100189"> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <input type="date" class="form-control" id="delivery-date-1" placeholder="Delivery date" value="2016-10-10"> 
            </div> 
           </div> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <label for="split-location-form__price">Price:</label> 
             <input type="number" id="delivery-price-1" class="form-control split-location-form__price" value="600"> 
            </div> 
           </div> 
          </div> 
         </form> 
        </div> 
        <div class="col-md-2"> 
         <button type="button" class="btn btn-default btn-sm split-location__delete-leg-btn" title="Delete this leg" data-id="1" id="delete-btn-1">Delete</button> 
        </div> 
       </div> 
      </div> 
     </div> 

     <hr/> 

     <div class="row" id="leg-2"> 
      <div class="col-md-5" id="pickup-info-2"> 
       <div class="row"> 
        <div class="col-md-1"> 
         <p class="split-location__leg-number">2</p> 
        </div> 
        <div class="col-md-11" id="pickup-info-exists-2"> 
         <p><span id="pickup-name-2"></span> <br/> <span id="pickup-address-2"></span> <br/> <strong><span id="pickup-city-2"></span>, <span id="pickup-state-2"></span> <span id="pickup-zip-2"></span></strong> <br/> Contact: <span id="pickup-contact-2"></span><br/> Phone: <span id="pickup-phone-2"></span></p> 
         <div class="form-group"> 
          <input type="date" id="pickup-date-2" class="form-control split-location__pickup-date"> 
         </div> 
        </div> 
        <div class="col-md-11" id="no-pickup-info-2"> 
         <p class="text-muted">Pickup information is <br/> not available yet</p> 
         <div class="form-group"> 
          <input type="date" id="pickup-date-2" class="form-control split-location__pickup-date"> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-7" id="delivery-info-2"> 
       <div class="row"> 
        <div class="col-md-10"> 
         <p><span id="delivery-name-2"></span><br/><span id="delivery-address-2"></span> <br/> <span id="delivery-city-2"></span>, <span id="delivery-state-2"></span> <span id="delivery-zip-2"></span><br/> Contact: <span id="delivery-contact-2"></span><br/> Phone: <span id="delivery-phone-2"></span></p> 
         <div class="form-group"> 
          <p> 
           <span style="margin-right: 30px" id="delivery-date-2"></span> Price: 
           <input type="number" class="form-control split-location-form__price" id="delivery-price-2"> 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <hr/> 

     <div class="row"> 
      <div class="col-md-12"> 
       <button type="button" id="add-leg-btn" class="btn btn-success split-location__add-leg-btn">Add New Leg</button> 
      </div> 
     </div> 
</div> 

Grundsätzlich hat es drei Hauptteile:

<div class="row" id="leg-1"> 
    .... 
</div> 

<hr> 

<div class="row" id="leg-2"> 
    .... 
</div> 

<button>Add Leg</button> 

Die ersten beiden sind divs anfänglichen Vorgaben. Wenn ein Benutzer eine Add Leg-Schaltfläche drückt, wird ein anderes div mit der ID leg-3 (und so weiter.) In die Vorlage eingefügt.

Answer 1

versuchen Sie Folgendes:

$('#modal').on('show.bs.modal', function() { 
    // Get the added divs within the modal and remove all except the first 2 
    $('div[id^="leg"]').not('#leg-1,#leg-2').remove(); 
}); 

Demo: https://jsfiddle.net/hmf2v4bj/

Answer 2

Fügen Sie dem hinzugefügten <div> eine Klasse hinzu, z. '.addedDivClass',

Verwenden Sie dann jQuery .remove(), um die Elemente zu entfernen, wenn Sie das Modal anzeigen.

$('#modal').on('show.bs.modal', function() { 
    // Get the added divs within the modal and remove them 
    $('.addedDivClass', this).remove(); 
}); 

Lesen Sie mehr über remove()here.