Question

Backstory:I’ve created a tool to type in and press enter to add as many email addresses to a member signup as necessary. The emails are added into a scrollable div as list items with an alternating zebra stripe and a red x to the right of each email allowing the user to delete the specific email they wish to in the list.

Here’s the thing: the actual inputs are hidden and separate from this list form. The list form is really just for the viewing pleasure/ease of the UX.

Question: I have successfully targeted the list item to remove that I wish to but this does not remove the input associated with the list item. How would I target this separate list item?

Here is the basic code I’ve created:

Targets and successfully removes the closest list item associated with the red x

$(".RemoveEmailBtn").live('click', function(e) {
    $(this).closest("li").fadeOut(300, function() { 
        $(this).remove();    
    });

// The additional code that is creating the list and inputs to give you a better idea of what I'm saying

} else {
    $('#Members').append('<li class="EmailList">' + email + '<span class="RemoveEmailBtn">x</span>' + '</li>');                                         
    $("li.EmailList:odd").addClass("oddItem");                     
    $('#add_email_field').append('<input class="email_inputs" type="hidden" name="emails" value="' + email + '"/>');
    $('#EmailInput').val('');
}

// The HTML as well: The HTML works perfectly. Again, the only issue is when I hit delete it only deletes the list item and not the hidden input
<div id="add_email_entry"><!-- add_email_entry -->
    <h2>Enter E-mail Addresses for New Members below:</h2>
    <div id="add_email_field"><!-- add_email_field -->
        <fieldset>
            <input class="xlarge" id="EmailInput" name="emailInput" size="30" type="text"/>
            <button id="AddEmailBtn" class="btn primary">Add</button>   
                <br/>
            <ul class="member" size="5" multiple="multiple" name="multiSelect" id="Members">
            </ul>
        </fieldset>
    </div>
    <!-- /add_email_field -->
</div>
<!-- /add_email_entry -->

Now how do I remove both the list item AND the input so when I hit the red X it removes both and not just the list item? The inputs are sticking around because I can’t figure out how to target each input related to the list item I have figured out how to delete.

Thanks in advance!

Answer 1

You’ll have to find inputs with class .email_inputs, and the value attribute matching the email you just removed from the list. Something like:

$('.email_inputs[value=[e-mail]]');

However, it would be much simpler if you just added the hidden inputs inside the list item you create to display the email, then just removing the li would remove the input too…