Question

我在每个“添加另一个输入框”链接上动态添加3个字段，但是现在我被困在如何删除动态创建的行上，即单击该特定删除链接时。到目前为止，这是我尝试过的

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').length + 1;

  $('#addScnt').on('click', function() {
    $('<p><label for="p_scnts"><input type="text"  size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });

  $(".remScnt").on('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p id="p_scnt1">
        <label for="p_scnts"><input type="text"  size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
        <label for="p_scnts"><input type="text"  size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
        <label for="p_scnts"><input type="text"  size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

任何帮助将不胜感激。请确保库版本相同。

Answer 1

您的事件处理程序的内容很好，存在问题，因为事件处理程序未附加到您的链接上。您可以使用$(document).on('click', 'selector', function)函数，也可以在创建新元素后始终将事件处理程序添加到它们中。

下面是一个.on的示例：

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').length + 1;

  $('#addScnt').on('click', function() {
    $('<p><label for="p_scnts"><input type="text"  size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });

  $(document).on('click', '.remScnt', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p id="p_scnt1">
        <label for="p_scnts"><input type="text"  size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
        <label for="p_scnts"><input type="text"  size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
        <label for="p_scnts"><input type="text"  size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

此外，出于可访问性的原因，您应该避免使用<a>元素作为按钮-理想情况下，您应该使用<button>元素，然后将其样式设置为链接。

动态生成的删除按钮应删除其p标签

1 个答案: