Question

我正在尝试实现一个功能，用户可以使用jquery添加和删除两个文本字段（即标题和说明），add more功能正常但removing顺序不正确。

她是显示问题的fiddle

Jquery的

var append = '<div><div class="form-group"> <label>Day 1</label><input type="text" value="" name="subHeading" class="form-control"></div>';
append += '<div class="form-group"> <label>Description</label> <textarea class="form-control" name="description"></textarea>';
append += '</div><button type="button" class="btn btn-danger remove" id="btnAddMore">Remove</button></div>';

$('#btnAddMore').click(function() {
  $('#appendContent:last').before(append);
});

$('body').on('click', '.remove', function() {
  //alert('ok');
  $(this).parent().remove();
});

当用户点击add more按钮时，我还需要再做一件事我正在显示标签，如果添加另一个项目day 1，则显示day 2等等。< / p>

Answer 1

在text

append/remove

提供一些class来识别容器的父元素。

$('.days').text(function(index) {
  return 'Day ' + (index + 1)
});

Updated Fiddle

Answer 2

你可以，

$('#btnAddMore').click(function() {
  var clone = $(append).clone()
  $('#appendContent').append(clone);
  clone.find(".form-group > label").text("Day " + $("#appendContent").children().length);
});
$('body').on('click', '.remove', function() {
  //alert('ok');
  $(this).parent().remove();
});

Fiddle

使用clone（）创建新创建的div的副本。
然后使用.find(".form-group > label").text()
通过计算"appendContentDiv"

Answer 3

给主要分类

var append='<div class="minus"><div class="form-group">

在jquery中

$(this).closest('.minus').remove();

Answer 4

看一下附件摘录：

＆＃13;

       /* Latest compiled and minified JavaScript included as External Resource */
var append='<div><div class="form-group"> <label></label><input type="text" value="" name="subHeading" class="form-control"></div>';
       append+='<div class="form-group"> <label>Description</label> <textarea class="form-control" name="description"></textarea>';
       append+='</div><button type="button" class="btn btn-danger remove" id="btnAddMore">Remove</button></div>';
       $('#btnAddMore').click(function(){
           $('#appendContent:last').before(append);
           		var i=1;
   						$('input[type="text"]').each(function(){
  					        $(this).prev().html('Day '+i);
           					$(this).attr('name', 'subHeading' + i); 
      							$(this).attr('id', 'subHeading' + i); 
     								i++;
  						});
       });
       $('body').on('click','.remove',function(){
           //alert('ok');
           $(this).parent().remove();
           var i=1;
   						$('input[type="text"]').each(function(){
              $(this).prev().html('Day '+i);
           					$(this).attr('name', 'subHeading' + i); 
      							$(this).attr('id', 'subHeading' + i); 
     								i++;
  						});
       });

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <button type="button" class="btn btn-primary"id="btnAddMore">Addmore</button>
    <!--for append -->
    <div id="appendContent">
    </div>
    
    <!--end append-->
                  
</div>

＆＃13;

还请看一下小提琴。

Demo fiddle

Answer 5

SomeViewOfConcrete2

https://jsfiddle.net/giantomakin/wsm755vv/8/

jquery追加和删除：删除顺序不正确

5 个答案: