jQuery - возможно удалить входную запись, связанную с элементом списка?

Question

Предыстория: я создал инструмент для ввода и нажатия клавиши ввода, чтобы добавить столько адресов электронной почты к подписке участника, сколько необходимо.Электронные письма добавляются в прокручиваемый элемент div в виде элементов списка с чередующейся полосой зебры и красным крестиком справа от каждого электронного письма, что позволяет пользователю удалить конкретное электронное письмо, которое он желает в списке.

Вот в чем дело: фактические входные данные скрыты и отделены от этой формы списка.Форма списка действительно только для удобства просмотра / простоты UX.

Вопрос: Я успешно нацелил элемент списка, чтобы удалить то, что я хочу, но это не удаляет входные данные, связанные с элементом списка.Как бы я нацелился на этот отдельный элемент списка?

Вот базовый код, который я создал:

Нацеливает и успешно удаляет ближайший элемент списка, связанный с красным 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 -->

Теперь, как мне удалить и элемент списка, и ввод, чтобы при нажатии на красную букву Х он удалял оба, а не только элемент списка?Входы торчат, потому что я не могу понять, как нацелить каждый вход, связанный с элементом списка, который я выяснил, как удалить.

Заранее спасибо!

Answer 1

Вы можете попробовать это, найдя элемент input, сопоставив его значение.

$(".RemoveEmailBtn").live('click', function(e) {
   $(this).closest("li").fadeOut(300, function() { 
       $(this).remove(); 
       var email = $(this).find(':not(.RemoveEmailBtn)').text();   
       $('input[value="' + email + '"]').remove();
   });
});

Answer 2

Вам нужно будет найти входные данные с классом .email_inputs и атрибутом value, соответствующим электронному письму, которое вы только что удалили из списка.Что-то вроде:

$('.email_inputs[value=user@example.com]');

Однако было бы намного проще, если бы вы просто добавили скрытые входы в элемент списка, который вы создаете, чтобы отобразить электронную почту, тогда простое удаление li также удалило бы ввод ...