如何刪除一個動態添加排序輸入框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和索引中所加入的輸入前

回答

相關問題