Question posted in 
I have these form inputs, where the user selects a value in the 1st input(from a datalist) and then all the others are auto-completed.There is also an add button which creates new rows.
What is not working well is that, when the user clicks the add button, the content of the well div is also copied.
<div class="col-sm-3" style="margin-left: 40px;">
<div class="well quantityInfo">-</div>
</div>
How can I deleted the text inside it when it is copied to the new row?
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>Here also the JSFiddle
2
Answers
I added
$('.quantityInfo').slice(-1).text("");and it worked.. if someone else has a better solution I will be happy to accept it.Here is my answer.
Or you can simply change some of your html code:
From
<div class="well quantityInfo">-</div>to<input type="text" class="well quantityInfo" value="---" readonly/>And jquery line from
$(this).closest('.form-group').find('.quantityInfo').text(text);to$(this).closest('.form-group').find('.quantityInfo').val(text);