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