通讯录删除按钮仅删首行问题修复求助

我来帮你搞定这个问题，咱们先拆解下代码里的几个核心问题，再给出修复后的完整代码：

问题根源分析 #

1. 重复ID导致的事件异常：所有删除按钮都用了id="deleteButton"，但HTML规范里ID必须是唯一的，这会让浏览器无法准确识别你点击的是哪一个按钮，自然只能触发第一行的删除逻辑。
2. 索引计算完全错误：原deleteContact函数里用tbody.find('td').index(element)获取行索引，这是在找<tr>在所有<td>中的位置，完全不是我们需要的“当前行在表格行列表中的索引”。
3. 数组与表格顺序不匹配：你用contact.push()把新联系人加到数组末尾，却用tbody.prepend()把行插到表格最前面，导致数组顺序和表格显示顺序完全相反，删除时索引根本对应不上。
4. 未闭合的HTML标签：生成邮箱输入框时少了闭合符号，会导致DOM结构混乱，间接影响元素选择。

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<button class="create">Create contact</button> 
<!-- Create Contact Form--> 
<div align=center id="createForm"> 
<br><input placeholder="First Name" id="firstName" /><br><br> 
<input placeholder="Last Name" id="lastName" /><br><br> 
<input placeholder="Phone number" id="number" /><br><br> 
<input placeholder="Email Address" type="email" id="email" /><br><br> 
<input id="addButton" type="submit" value="CREATE" /><br><br> 
</div> 
<div class="search">Search contacts</div> 
<table id="table"> 
<thead> 
<tr> 
<th>First Name</th> 
<th>Last Name</th> 
<th>Phone Number</th> 
<th>Email Address</th> 
<th>Actions</th>
</tr> 
</thead> 
<tbody> 
</tbody> 
<tfoot> 
</tfoot> 
</table>

<script>
var addressBook = (function() { 
    var contact = [{ 
        firstName: 'myName', 
        lastName: 'myLastName', 
        number: '123456789', 
        email: 'myEmail@gmail.com' 
    }]; 
    var table = $('#table'); 
    var tbody = table.find('tbody'); 
    var form = $('#createForm'); 
    var $firstName = form.find('#firstName'); 
    var $lastName = form.find('#lastName'); 
    var $number = form.find('#number'); 
    var $email = form.find('#email'); 
    var $addButton = form.find('#addButton'); 
    // 改用class选择删除按钮，避免ID重复
    var $deleteButton = table.find('.deleteButton'); 
    var $input = table.find(".edit"); 

    $addButton.on('click', addContact); 
    // 绑定事件到class选择器
    table.on('click', '.deleteButton', deleteContact); 

    addedContact(); 

    function addedContact() { 
        tbody.html(''); 
        var length = contact.length; 
        for (var i = 0; i < length; i++) { 
            // 修复邮箱输入框的闭合标签，删除按钮改用class
            tbody.append('<tr><td><input class="edit" type="text" value="' + contact[i].firstName + '"></td><td><input class="edit" type="text" value="' + contact[i].lastName + '"></td><td><input class="edit" type="text" value="' + contact[i].number + '"></td><td><input class="edit" type="text" value="' + contact[i].email + '"></td><td><button class="deleteButton"> DELETE </button></td></tr>'); 
        } 
    } 

    function addContact() { 
        var newPerson = { 
            firstName: $firstName.val(), 
            lastName: $lastName.val(), 
            number: $number.val(), 
            email: $email.val() 
        }; 
        // 如果想让新联系人前置显示，把push改成unshift即可
        contact.push(newPerson); 
        $firstName.val(''); 
        $lastName.val(''); 
        $number.val(''); 
        $email.val(''); 
        addedContact() 
    } 

    function deleteContact(event) { 
        // 获取当前按钮所在的行
        var currentRow = event.target.closest('tr'); 
        // 获取该行在tbody中的索引
        var rowIndex = tbody.find('tr').index(currentRow); 
        // 从数组中移除对应索引的联系人
        contact.splice(rowIndex, 1); 
        // 重新渲染表格
        addedContact(); 
    } 

    return { 
        addContact: addContact, 
        deleteContact: deleteContact 
    }; 
})(); 
</script>

关键修复细节说明 #

• 替换ID为Class：把所有删除按钮的id="deleteButton"改成class="deleteButton"，同时事件绑定和元素选择也对应调整，彻底解决重复ID的问题。
• 修正索引计算：用tbody.find('tr').index(currentRow)获取当前行在表格行列表中的正确索引，确保数组和表格行的位置一一对应。
• 统一顺序逻辑：把tbody.prepend()改成tbody.append()，让数组顺序和表格显示顺序保持一致，新增联系人会出现在表格末尾。如果你还是希望新联系人前置，只需要把contact.push(newPerson)改成contact.unshift(newPerson)，同时保留tbody.prepend()即可，顺序依然匹配。
• 修复DOM结构：给邮箱输入框补上闭合符号，避免DOM解析异常。

现在点击任意行的DELETE按钮，就能精准删除对应的联系人，数组也会同步更新啦！

内容的提问来源于stack exchange，提问作者Lomi Faith