Question

我刚刚使用<a id="add">Add</a>链接按钮创建了添加输入字段，工作正常。并创建了删除按钮，该按钮无法正常工作。我需要使用<a class="remScnt">Remove</a>链接按钮

删除确切的输入字段

$(document).ready(function() {
  var scntDiv = $('#add_words');
  var wordscount = 1;
  var i = $('.line').size() + 1;
  $('#add').click(function() {
    wordscount++;
    $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt">Remove</a></div>').appendTo(scntDiv);
    i++;
    return false;
  });
  Remove button
  $('.remScnt').click(function() {
    if (i > 1) {
      $(this).parents('.line').remove();
      i--;
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a id="add">Add</a>
<div id="add_words">
  <div class="line">Word is 1
    <input type="text" value="1" />
  </div>
</div>

Answer 1

您的代码中存在两个问题：

“remScnt”应该是类属性而不是id。
您的点击事件在文档准备就绪时执行，因此您的动态元素将不会附加任何事件处理程序

我在http://jsfiddle.net/qQKFt/3/创建了一个有效的JSFiddle，供您查看。

Answer 2

您已使用class而不是id定义了删除按钮。请尝试使用$('.remScnt').click(function() {代替$('#remScnt').click(function() {

Answer 3

由于您正在创建动态内容，因此您需要能够附加到尚未在页面上创建的元素。从jQuery 1.7开始，可以通过事件委托和“on”函数来实现这一点：

$('div#add_words').on("click", "a.remScnt", function() { 
// the rest of your function

jquery - 使用href按钮删除特定输入

3 个答案: