-1
私はこれらのフォーム入力を持っています。ユーザーは最初の入力（データリストから）で値を選択し、その後はすべて自動的に完了します。新しい行を作成するボタン。フォームグループを複写するときにdivからのテキストを削除する
うまくいかないのは、ユーザーが追加ボタンをクリックすると、well divのコンテンツもコピーされることです。
<div class="col-sm-3" style="margin-left: 40px;">
<div class="well quantityInfo">-</div>
</div>
新しい行にコピーされたテキストを削除するにはどうすればよいですか？ここで
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1",
"labels": [{
"version": "01",
"quantity": 500
}, {
"version": "02",
"quantity": 800
}, ]
}, {
"product": "22222",
"description": "description 2",
"labels": [{
"version": "01",
"quantity": 900
}, {
"version": "02",
"quantity": 100
}, ]
}, {
"product": "33333",
"description": "description 3",
"labels": [{
"version": "01",
"quantity": 200
}, {
"version": "02",
"quantity": 4300
}, ]
}];
jsonOptions.forEach(function(item) {
var option = '<option value="' + item.product + '">' + item.description + '</option>';
dataList.append(option);
});
$(function() {
$('body').on('input', '.product,.products', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
var text = "";
var version = '';
var quantity = '';
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
text = a.labels
a.labels.forEach(function(el) {
text = "version " + el.version + " = " + el.quantity + "\n ";
});
}
});
$(this).closest('.form-group').find('.description').val(description);
$(this).closest('.form-group').find('.mytext').val(description);
$(this).closest('.form-group').find('.quantityInfo').text(text);
});
});
var counter = 0;
$('#form1')
.on('click', '.addButtonDED', function() {
counter++;
var $template = $('.form-group').slice(-1).clone(true, true).find('input').val('').end()
.find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
.find('[name^="product-"]').attr('name', 'product-' + counter).end()
.find('[name^="description-"]').attr('name', 'description-' + counter).end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
var $row = $('.form-group').slice(-1);
counter--;
$row.remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-sm-2">
<input type="text" list="products" class="form-control product" name="product[]" />
<datalist id="products" class="products"></datalist>
</div>
<div class="col-sm-3">
<input id="" type="text" class="form-control description" name=" description[]" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
<div class="col-sm-3" style="margin-left: 40px;">
<div class="well quantityInfo">-</div>
</div>
</div>
</fieldset>
</form>