jQuery - 可以删除与列表项关联的输入条目吗？

Question

背景故事：我创建了一个工具，用于输入并按 Enter 键以根据需要向会员注册添加尽可能多的电子邮件地址。电子邮件作为列表项添加到可滚动的 div 中，每封电子邮件的右侧都有交替的斑马条纹和红色 x，允许用户删除他们希望在列表中删除的特定电子邮件。

事情是这样的：实际的输入是隐藏的，并且与该列表表单分开。列表形式实际上只是为了用户体验的观看乐趣/方便。

问题：我已成功定位列表项以删除我希望删除的内容，但这不会删除与列表项关联的输入。我如何定位这个单独的列表项？

这是我创建的基本代码：

目标并成功删除与红色 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 -->

现在如何删除列表项和输入，以便当我点击红色 X 时，它会删除两者而不仅仅是列表物品？输入一直存在，因为我无法弄清楚如何定位与我已经弄清楚如何删除的列表项相关的每个输入。

提前致谢！

Answer 1

您必须找到类 .email_inputs 的输入，以及与您刚刚从列表中删除的电子邮件匹配的 value 属性。类似于：

$('.email_inputs[[email protected]]');

但是，如果您只是在创建的列表项中添加隐藏输入来显示电子邮件，那么只需删除 li 也会删除输入......

Answer 2

您可以通过匹配其值来查找 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();
   });
});