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

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>元素，然后将其样式设置为看起来像链接。