c# - 我想在中添加标签和文本框的集合我怎样才能做到这一点？

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();
 }); ​