如何删除一个动态添加排序输入框div和索引中所加入的输入前

$('#add').click(function() { 
 
        var x = $('<div class="ui-state-highlight"><input type="text" class="form-control" ng-model="input.field" placeholder="Name"/><input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="a"><span class="glyphicon glyphicon-move"></span></a><input type="button" class="form-control" class="Minus" value="-" />' + ($('.con div').length + 1) + '</div>'); 
 
        x.appendTo('#form .con') // the length is not working here if I use it in the front of the div while declairng the variable. 
 
       }); 
 

 
       $('.Minus').on('click', '#rem .Minus', function() { 
 
        $(this).closest(".fruit").remove(); 
 
        }); 
 
      
 
        $("span").sortable({ 
 
        connectWith: ".con" 
 
       }).disableSelection();

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" /> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script> 
 

 
</head> 
 

 

 
<body> 
 

 
<div> 
 
      
 
<button id="add">add another option</button> 
 
    <form id="form" class="form-inline"> 
 
    <span class="con"> 
 
     <div class="ui-state-highlight"><input type="text" class="form-control" ng-model="input.field" placeholder="Name"/> 
 
       <input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="#"> 
 
      <span class="glyphicon glyphicon-move"></span><input type="button" class="form-control" class="Minus" value="delete" /> 
 
     </a> 
 

 
</div> 
 
     
 
    </span> 
 
    </form> 
 
    </div> 
 
    </body> 
 
    </html>

我尝试添加索引和删除单独添加rows.I试图用长股利的，但它不是解雇，如果我将其追加在输入前boxes.Here是在plunker http://plnkr.co/edit/4P6HWu9jVTmZhOnEhMdb?p=preview

来源

2015-11-04 Aj Ay

在这里你去：

$('#add').click(function() { 
 
    var x = $('<div class="ui-state-highlight">' + ($('.con div').length + 1) + '<input type="text" class="form-control" ng-model="input.field" placeholder="Name"/><input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="a"><span class="glyphicon glyphicon-move"></span></a><input type="button" class="form-control Minus" value="-" /></div>'); 
 
    x.appendTo('#form .con') // the length is not working here if I use it in the front of the div while declairng the variable. 
 

 

 

 
}); 
 

 
$('.con').on('click', '.Minus', function() { 
 
    $(this).parents(".ui-state-highlight").remove(); 
 
}); 
 

 
$("span").sortable({ 
 
    connectWith: ".con" 
 
}).disableSelection();

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" /> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script> 
 

 
</head> 
 

 

 
<body> 
 

 
    <div> 
 

 
    <button id="add">add another option</button> 
 
    <form id="form" class="form-inline"> 
 
     <span class="con"> 
 
     <div class="ui-state-highlight"><input type="text" class="form-control" ng-model="input.field" placeholder="Name"/> 
 
       <input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="#"> 
 
      <span class="glyphicon glyphicon-move"></span> 
 
     <input type="button" class="form-control" class="Minus" value="delete" /> 
 
     </a> 
 

 
    </div> 
 

 
    </span> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

你有双class声明，所以我合并他们得到form-control Minus类。
还修复了.on()处理程序的选择器。

编辑：你的新行的标记是由

var x = $('<div class="ui-state-highlight"><input type="text" class="form-control" ng-model="input.field" placeholder="Name"/><input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="a"><span class="glyphicon glyphicon-move"></span></a><input type="button" class="form-control Minus" value="-" />' + ($('.con div').length + 1) + '</div>');

定义的索引移到前面，将这个($('.con div').length + 1)到前面，像这样：

var x = $('<div class="ui-state-highlight">' + ($('.con div').length + 1) + '<input type="text" class="form-control" ng-model="input.field" placeholder="Name"/><input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="a"><span class="glyphicon glyphicon-move"></span></a><input type="button" class="form-control Minus" value="-" /></div>');

来源

2015-11-04 18:55:15 Justas

太谢谢你了@Justas –

你能告诉我一个什么可以用来让它在前面编号吗？ –

我已经更新了答案和代码片段。 – Justas

如何删除一个动态添加排序输入框div和索引中所加入的输入前

回答

相关问题