从div复制表单组删除文本时

时间：2017-03-24 12:29:16

标签： javascript jquery

我有这些表单输入，用户在第一个输入中选择一个值（来自datalist），然后所有其他值都自动完成。还有一个添加按钮，用于创建新行。

效果不佳的是，当用户点击添加按钮时，well div的内容也会被复制。

<div class="col-sm-3" style="margin-left: 40px;">
    <div class="well quantityInfo">-</div>
</div>

如何在复制到新行时删除其中的文本？

＆＃13;
＆＃13; 
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();
  });
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

此处还有JSFiddle

2 个答案:

答案 0 :(得分：0)

我添加$('.quantityInfo').slice(-1).text("");并且它有效..如果其他人有更好的解决方案，我会乐意接受它。

$('#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');
    $('.quantityInfo').slice(-1).text("");

  })

这是我的answer。

答案 1 :(得分：0)

或者您可以简单地更改一些HTML代码：

从<div class="well quantityInfo">-</div>到<input type="text" class="well quantityInfo" value="---" readonly/>

从$(this).closest('.form-group').find('.quantityInfo').text(text);到$(this).closest('.form-group').find('.quantityInfo').val(text);

的jquery行 

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').val(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;">
        <input type="text" class="well quantityInfo" value="---" readonly/>
      </div>

    </div>
  </fieldset>
</form>

相关问题
最新问题