jquery - 如何在jquery中找到父元素并删除该父元素的子元素文本？

Question

这是我使用过的标记

<table cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr class="tr-head">
                <th>Amount Owed</th>
                <th>Amount Paid</th>
                <th>Check / Cash / Online</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr class="row0">
                <td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
                <td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
                <td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
                <td><a href="javascript:void(0);" class="edit-row" title="row0">Edit</a></td>
            </tr>
            <tr class="row1">
                <td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
                <td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
                <td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
                <td><a href="javascript:void(0);" class="edit-row" title="row1">Edit</a></td>
            </tr>
        </tbody>
    </table>

当我单击特定行的“编辑”时，我想删除除 input 元素之外的前三个子单元格 td 文本(即 $10、$20...)。输入类型应在隐藏单元格文本后显示。请帮助我如何使用 jquery 脚本来实现它。谢谢

我尝试了一些脚本来执行此操作，即

$(document).ready(function(){
            $('.edit-row').click(function(){
                    var title = $(this).attr('title');
                    $('.'+title+' td').text('');
                });
        });

但是上面的脚本使单元格为空。

Answer 1

此代码适合您:

​$('.edit-row​​').click(function() {
    $(this).closest('tr').find('td').not(':last')
        .contents().filter(
            function() {
                return this.nodeType == 3;
            }).remove();
});​

已测试here .

Zachary Kniebel 使用 .contents() 方法击中了它

抱歉，我忘记了显示输入元素的部分:

$('.edit-row').click(function() {
    $(this).closest('tr').find('td').not(':last').contents()
        .filter(
            function() {
                return this.nodeType != 3;
            })
        .show().parent().contents()
        .filter(
            function() {
                return this.nodeType == 3;
            }).remove();
});​

已测试并正常工作。