Поле jQuery не удаляется после его добавления

Question

У меня возникает проблема, когда я не могу заставить скрипт jQuery удалять поля после их добавления. Я пробовал несколько изменений, но ничего не сработало.

$(function() { 
 
    var dataSourceField = $('#sign-up-organization-discovery-source'); 
 
    var i = $('#sign-up-organization-discovery-source p').size() + 1; 
 

 
    $('#sign-up-add-discovery-source').on('click', function() { 
 
    $('<p><label for="discovery-source-field"><input type="text" id="discovery-source-field" size="20" name="discoverySource" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(dataSourceField); 
 
    i++; 
 
    return false; 
 
    }); 
 
    $('#remScnt').on('click', function() { 
 
    if (i > 2) { 
 
     $(this).parents('p').remove(); 
 
     i--; 
 
    } 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
    <form action="/app/sign-up/organization" method="post"> 
 
     <p>{{user.email}}</p> 
 
     <input type="hidden" name="admin" value="{{user.email}}"> 
 
     <input type="hidden" name="organizationId"> 
 
     <label for="sign-up-organization">Company/Organization Name</label> 
 
     <input type="text" class="form-control" id="sign-up-organization" name="organizationName" value="" placeholder="Company/Organization"> 
 
     <a href="#" id="sign-up-add-discovery-source">Add Another Discovery Source</a> 
 
     <div id="sign-up-organization-discovery-source"> 
 
     <input type="text" id="discovery-source-field" placeholder="Discovery Source" name="discoverySource"> 
 
     </div> 
 
     <br /> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    <a href="/login">Already have an account? Login here!</a> 
 
    </div> 
 
</div>

Answer 1

Есть несколько проблем здесь.

• Во-первых, id предполагается быть уникальным! Вы дублируете значения атрибутов id каждый раз, когда вы добавляете элемент.

• Во-вторых, даже если бы вы использовали класс, а не id, он все равно не будет работать, как и ожидалось, так как интерактивными/съемный a элемент не существует в DOM, когда вы подключаете слушателей событий.

Вы бы либо нужно прикрепить событие после добавления элемента, или вы можете использовать event delegation и прикрепить событие к общему родительскому элементу, который существует в данный момент.

Example Here

$('#sign-up-organization-discovery-source').on('click', '.remove', function() { 
    // ... 
}); 

• Я изменил <a href="#" id="remScnt">Remove</a> на: <a href="#" class="remove">Remove</a>.
• Затем I delegatedclick событие #sign-up-organization-discovery-source элемент.

Answer 2

$('##sign-up-organization-discovery-source').on('click', '#remScnt', function() { 
    if (i > 2) { 
     $(this).parents('p').remove(); 
     i--; 
    } 
    return false; 
});