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

时间:2012-10-26 13:21:25

标签: jquery jquery-ui jquery-selectors

这是我使用的标记

<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>

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

我尝试过一些脚本来做这件事,即

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

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

4 个答案:

答案 0 :(得分:3)

此代码适用于您:

​$('.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();
});​

经过测试和工作。

答案 1 :(得分:1)

查找jQuery的.contents()方法。它将返回调用元素/集合的所有text,element和content节点。你想要做的是创建一个过滤方法,如下所示:

var filterNodes = function() {
    return this.nodeType === 1 || this.nodeType === 3;
}

将返回所有元素和文本节点。从那里,选择要从中删除文本的元素节点,然后删除文本节点。

注意:.contents()方法返回CHILDREN而不是DESCENDANTS

修改

我重读了你的问题,我觉得这更适合你:

  1. 使用标准jQuery选择器
  2. 遍历前三个td
  3. 运行以下过滤方法,仅获取文本节点:

    var filterNodes = function () { return this.nodeType == 3; }

  4. 像这样调用过滤器方法:

    var firstThreeTDs = ....

    var nodeSet = firstThreeTDS.contents().filter(filterNodes).toArray();

    for (var i = 0; i < nodeSet.length; i++) {

        nodeSet[i].parentNode.removeChild(nodeSet[i]);`
    

    }

  5. 使用.show()方法,.css()方法或效果方法(淡入淡出,幻灯片等)来显示输入框


  6. 编辑2:

    有另一种解决方案,但它不是最好的,它未经测试,并且需要大量的调试时间(特别是因为您可能会丢失一些属性/属性,基于您的实现):您可以使用jQuery的{ {1}}方法,复制每个clone()中的输入元素,然后使用td方法将.html()的内部HTML设置为该重复的输入元素。这不是一个好的解决方案,它是更多的开销,而且它更新手,但是如果你对手动操作DOM感到不舒服它会起作用。


    如果您需要更多帮助/澄清,请与我们联系。祝好运! :)

答案 2 :(得分:0)

$('.row0 #amount_owed,.row0 #amount_paid,row0 #check_cash_online').remove();

答案 3 :(得分:0)

    $('.edit-row').click(function(){
       $(this).parents("tr").find('td').not(":last").hide().html("");
    });

http://jsfiddle.net/bLygN/2/