使用动态数据

时间:2016-07-07 09:21:07

标签: javascript jquery twitter-bootstrap bootstrap-modal

我有一个模态,最初里面有两个<div>个元素。但用户也可以动态添加其他<div>元素。

我想要做的是每次关闭并重新打开模态时,只显示默认的两个<div>

我尝试了以下内容:

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

没有用。

我该怎么做?

初始模态正文:

<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>

基本上,它有三个主要部分:

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

<hr>

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

<button>Add Leg</button>

前两个div是初始默认值。当用户按下Add Leg按钮时,另一个ID为leg-3的div(依此类推。)将插入到模板中。

2 个答案:

答案 0 :(得分:3)

为添加的<div>添加一个类,即。 ” .addedDivClass',

然后在显示模态时使用jQuery .remove()删除元素。

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

详细了解remove() here

答案 1 :(得分:1)

尝试以下方法:

$('#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();
});

演示:https://jsfiddle.net/hmf2v4bj/