сгенерированная Dynami c кнопка удаления должна удалить свой тег 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> и затем стилизовать его выглядеть как ссылка.