我想在其中添加標簽和文本框的集合 <div class=“form-inliine”> 我怎樣才能做到這一點？

Question

這是我下面的代碼。

 <div class="carpet bs-docs-example bs-docs-carpet">

            <h4>Please Provide details about your carpetting needs </h4>


            <div class="form-inline">
                <label class="control-label"><b>Length</b></label>
                <input type="text" name="Carpet.Room.Length.Feet" id="Carpet_Room_Length_Feet" style="width: 80px" class="floor-text" />Ft
            <input type="text" name="Carpet.Room.Length.Inch" id="Carpet_Room_Length_Inch" class="floor-text" />Inch
                <label><b>Width</b></label>
                <input type="text" name="Carpet.Room.Width.Feet" id="Carpet_Room_Width_Feet" class="floor-text" />Ft
             <input type="text" name="Carpet.Room.Width.Inch" id="Carpet_Room_Width_Inch" class="floor-text" />Inch<br />
            </div>
            <div></div>
            <a href="#" class="addroom">Add Room</a> / <a href="#" class="removeroom">Remove Room</a>
            <br />
            <div class="control-group">
                @Html.Label("Removing Old flooring", new { @class = "control-label" })
                <div class="controls">
                    @Html.DropDownListFor(model => Model.Carpet.RemoveOldFlooring, new List<SelectListItem>() { new SelectListItem() { Text = "Yes", Value = "True" }, new SelectListItem() { Text = "No", Value = "False" } })
                </div>
            </div>
            <div class="control-group">
                @Html.Label("Molding", new { @class = "control-label" })
                <div class="controls">
                    @Html.DropDownListFor(model => Model.Carpet.Molding, new List<SelectListItem>() { new SelectListItem() { Text = "Yes", Value = "True" }, new SelectListItem() { Text = "No", Value = "False" } })
                </div>
            </div>
            <div class="control-group">
                @Html.Label("Stairs Included?", new { @class = "control-label" })
                <div class="controls">
                    @Html.DropDownListFor(model => Model.Carpet.Stairs, new List<SelectListItem>() { new SelectListItem() { Text = "Yes", Value = "True" }, new SelectListItem() { Text = "No", Value = "False" } })
                </div>
            </div>
            <div class="control-group">
                @Html.Label("How many Steps", new { @class = "control-label" })
                <div class="controls">
                    @Html.EditorFor(x => x.Carpet.StairSteps)
                </div>
            </div>




    </div>​

我正在使用Jquery如下

 $('body').on('click','a.addroom', function(e) {
     e.preventDefault();

     var $cloned = $('.form-inline:eq(0)').clone();

     $('body').append($cloned);

 }); 


 $('body').on('click', 'a.removeroom' ,function(e) {
     e.preventDefault();
     $(this).closest('div').remove();
}); ​

其添加但不刪除它。 我只想添加標簽中的內容，然后單擊“添加房間”和“刪除房間”鏈接中的內容即可。

Answer 1

為什么不給新添加的內容上課

$('body').on('click','a.addroom', function(e) {
     e.preventDefault();

     var $cloned = $('.form-inline:eq(0)').clone().addClass('NewlyAdded');

     $('body').append($cloned);

 }); 

然后像這樣刪除

 $('body').on('click', 'a.removeroom' ,function(e) {
    e.preventDefault();         
    $('.NewlyAdded').remove();
 }); ​