2016-09-15 100 views
0

我寫這個代碼來創建新的輸入字段,我需要以某種方式修改它,所以我可以刪除字段。我希望將var計數器添加到mySpan中,然後我製作$(#removeBox).click(function(),然後我可以獲得需要刪除的輸入字段的ID。但我不能讓跨度可點擊,當我嘗試這樣做,就像這樣<a class="deleteBox' + counter'"><span class="glyphicon glyphicon-remove"></span></a>它說我缺少)。我知道這裏有一些關於這個問題的解決方案,但我想讓我的工作。刪除輸入字段與跨度

var counter = 2; 
    $("#addTextField").click(function() { 
     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'textboxdiv'+counter); 
     newTextBoxDiv.after().html('<input type="text" name="textbox' + counter + '" placeholder="Category" /><span id="mySpan" class="glyphicon glyphicon-remove"></span>'); 
     newTextBoxDiv.appendTo("#textboxgroup"); 
     counter++; 

    }); 
+0

使一個jsfiddle。 –

+0

你可以分享可執行的演示/片段或[JSFiddle](https://jsfiddle.net/)嗎? [_創建一個最小,完整和可驗證的示例_](http://stackoverflow.com/help/mcve) – Rayon

回答

2

嘗試這樣的:關鍵是要刪除您點擊的元素上,您可以用$(this)獲得點擊

var counter = 0; 
 
    $("#addTextField").on('click', function() { 
 
      var newTextBoxDiv = $(document.createElement('div')).attr("id", 'textboxdiv'+counter); 
 
      newTextBoxDiv.after().html('<div class="wrapper">' + counter + '<input type="text" name="textbox' + counter + '" placeholder="Category" /><span class="glyphicon glyphicon-remove">remove</span></div>'); 
 
      newTextBoxDiv.appendTo("#textboxgroup"); 
 
      counter++; 
 
    
 
     }); 
 
     
 
    $('body').on('click', '.glyphicon-remove', function(){ 
 
    \t $(this).closest('.wrapper').remove(); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="addTextField">click to add</div> 
 
    
 
    <div id="textboxgroup"></div>

在您的代碼中,您在每次點擊時都添加了一個ID <span id="mySpan",因爲ID不應該是唯一的。所以如果你多次添加它,它不再是獨一無二的。更好地使用類,而不是...

+0

謝謝,這有效,我修改了一下,我添加了一個id來跨度''然後得到了id並刪除了div包裹輸入+ span'var id = $(this).attr('id'); $(「#textboxdiv」+ id).remove();' – rtom

+0

很高興聽到。如果你真的想使用一個ID,爲什麼你可能想要做' caramba

+0

好的,謝謝,但現在有一個問題,我想使用相同的腳本添加相同的表單,(一個是添加品牌和類別,它屬於,其他用於添加屬於該類別的類別和品牌)。這是否有可能? – rtom

1

試試這個:

var counter = 0; 
 
$('#add').click(function() { 
 

 
    $('#target').append('<span>New Input: <input type="text"><button id="remove' + counter + '">Remove</button><br></span>'); 
 

 
    $('#remove' + counter).click(function() { 
 

 
    $(this).parent().html(''); 
 
    counter--; 
 
    }); 
 
    counter++; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="target"></div>

+1

現在我看代碼,我注意到生成的id不保證是唯一的,如果您刪除並添加一個新的。但是,您可以爲所有人使用同一個班級。然後使用jquery獲取所有輸入。 –