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>。
• 然后我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; 
});