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; 
});