删除输入字段与跨度

我写这个代码来创建新的输入字段，我需要以某种方式修改它，所以我可以删除字段。我希望将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++; 

    });

来源

2016-09-15 rtom

使一个jsfiddle。 –

你可以分享可执行的演示/片段或[JSFiddle]（https://jsfiddle.net/）吗？ [_创建一个最小，完整和可验证的示例_]（http://stackoverflow.com/help/mcve） – Rayon

尝试这样的：关键是要删除您点击的元素上，您可以用$(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不应该是唯一的。所以如果你多次添加它，它不再是独一无二的。更好地使用类，而不是...

来源

2016-09-15 07:30:04 caramba

谢谢，这有效，我修改了一下，我添加了一个id来跨度''然后得到了id并删除了div包裹输入+ span'var id = $（this）.attr（'id'）; $（“＃textboxdiv”+ id）.remove（）;' – rtom

很高兴听到。如果你真的想使用一个ID，为什么你可能想要做' caramba

好的，谢谢，但现在有一个问题，我想使用相同的脚本添加相同的表单，（一个是添加品牌和类别，它属于，其他用于添加属于该类别的类别和品牌）。这是否有可能？ – rtom

试试这个：

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>

来源

2016-09-15 07:28:33

现在我看代码，我注意到生成的id不保证是唯一的，如果您删除并添加一个新的。但是，您可以为所有人使用同一个班级。然后使用jquery获取所有输入。 –

删除输入字段与跨度

回答

相关问题