我有一个表单，我正在尝试生成多个输入表单元素并使用删除按钮删除。由于生成的表单元素具有其他一组表单元素，可以单独添加和删除。当我在新生成的元素上单击“添加墙”时，仅添加第一部分。它应该在“添加墙”所在的同一部分中添加和删除 这是我试过的代码
https://jsfiddle.net/m20w0p1p/
<!-- BEGIN FORM-->
<div class="form-body">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off" method="post" id="voilation">
<div class="form-group">
<label>Title</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="text" name="title"> </div>
</div>
<div class="entry input-group col-md-12">
<div class="col-md-2">
<div class="form-group">
<label>Floor</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="floor[]" type="text" placeholder="Floor" /> </div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Wall/Celing</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="celing[]" value="celing" type="text" />
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Length</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="length[]" type="text" placeholder="Length" /> </div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Height</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="breadth[]" type="text" placeholder="Breadth" /> </div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="material[]" type="text" placeholder="Material" />
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label></label>
<div class="input-group">
<input class="form-control" name="thickness[]" type="hidden" placeholder="Thickness" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="">Add</span>
</button>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label></label>
<div class="input-group">
<input class="form-control" name="wall[]" type="hidden" placeholder="WAll" /> </div>
</div>
</div>
<div class="subcontrol">
<div class="section">
<div class="subentry input-group col-md-12">
<div class="col-md-2">
<div class="form-group">
<label></label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="wall[]" value="Wall" type="text" />
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Length</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="wall_length[]" placeholder="Length" type="text" />
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Height</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-street-view"></i>
</span>
<input class="form-control" name="height[]" type="text" placeholder="Height" />
<span class="input-group-btn">
<button class="btn btn-success btn-add-wall" type="button">
<span class="">Add Wall</span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions left">
<button type="submit" class="btn green"><i class="fa fa-check"></i> Submit</button>
</div>
</form>
<!-- END FORM-->
$(document).on('click', '.btn-add', function (e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus">Remove Floor</span>');
}).on('click', '.btn-remove', function (e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
//Add wall
$(document).on('click', '.btn-add-wall', function (e)
{
e.preventDefault();
var controlForm = $('.subcontrol').first(),
currentEntry = $(this).parents('.subentry:last'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.subentry:not(:last) .btn-add-wall')
.removeClass('btn-add-wall').addClass('btn-remove-wall')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus">Remove Wall</span>');
}).on('click', '.btn-remove-wall', function (e)
{
$(this).parents('.subentry:first').remove();
e.preventDefault();
return false;
});