I want to add collection of Labels & textboxes in <div class=“form-inliine”> how can I do this?

Question

This is my code below of view.

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

and I am using Jquery as below

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

Its adding But not removing it. I just want to add the contents which are in tag and remove those on clicking the Links "Add Room" & "Remove Room".

Answer 1

why not give newly added content a class

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

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

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

 }); 

and remove like this

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