Question

我的应用程序中有多个表行，并希望删除其中一个。我有一个功能，当我点击一个按钮时，另一个表行。

首先我有：

<table>
    <thead> ... </thead>
    <tbody>
    <tr id='firstObject'> <td> <i class="icon-chevron-right clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr>
    <tr id='secondObject'> <td> <i class="icon-chevron-right clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr> ....

但如果我点击i课程icon-chevron-right变为icon-chevron-down，我就会：

<tbody>
<tr id='firstObject'> <td> <i class="icon-chevron-down clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr>
<tr id='info'> ... </tr>
<tr id='secondObject'> <td> <i class="icon-chevron-right clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr> ....

没有诀窍。如果我单击DeleteButton我想删除该行，如果$(i).hasClass('icon-chevron-down')也删除下一行，即id='info'行。我的代码是tr没有id，这只是为了更好地解释它。

这是我的功能：

    function onDeleteAlertSuccess(id) {
        $('#alert-detail-table').find('tr').each(function () {
            if ($(this).attr('data-id') == id) {
                $(this).fadeOut(400, function () {
                    if ($(this).next($('td').next($('i').hasClass('icon-chevron-down')))) {
                        $(this).next('tr').remove();
                    }
                    $(this).remove();
                });
            }
        });
    }

第二个if始终为true，但如果!$('i').hasClass('icon-chevron-down')则必须为false。现在，如果id='icon-chevron-right'，它将移除id='secondObject'的下一个表格行并且不正确。

我如何解决这个问题？

编辑：

我在Jérémy的帮助下解决了这个问题：

    function onDeleteAlertSuccess(id) {
        $('#alert-detail-table').find('tr').each(function () {
            if ($(this).attr('data-id') == id) {
                $(this).fadeOut(400, function () {
                    var tr = $(this);
                    var nextElement = tr.next();

                    tr.find("i").each(function () {
                        if ($(this).hasClass("icon-chevron-down")) {
                            nextElement.remove();
                        }
                    });
                    //if ($(this).first($('td:first-child').hasClass('icon-chevron-down'))) {
                    //    debugger;
                    //}
                    //if ($(this).next($('td').next($('i').hasClass('icon-chevron-down')))) {
                    //    $(this).next('tr').remove();
                    //}
                    $(this).remove();
                });
            }
        });
    }

Answer 1

您的代码没有链接，正如Shivan在评论中说的那样，但我仍然试图用它做点什么。如果我理解的话，单击删除按钮应该删除链接的行，如果在其中定义了某个类，则删除该行。

所以我做了一个小小的小提琴，展示了如何使用jQuery轻松完成这项工作：jsfiddle

$( function() {
    $( document ).on( "click", ".deleteLink", function() {
        var tr = $( this ).parent().parent();
        var nextElement = tr.next();

        if( nextElement.hasClass( "notLink" ) ) {
            nextElement.remove();    
        }

        tr.remove();

        return false;
    });
});

notLink是应该由其上排删除的tr类，而deleteLink是删除按钮的类

编辑：

如果班级在i元素上，而不在tr中，那么检查它也很简单;请参阅the updated fiddle和相应的代码：

$( function() {
    $( document ).on( "click", ".deleteLink", function() {
        var tr = $( this ).parent().parent();
        var nextElement = tr.next();

        nextElement.find( "i" ).each( function() {
            if( $( this ).hasClass( "toRemove" ) ) {
                nextElement.remove();   
            }
        });

        tr.remove();

        return false;
    });
});

我想检查一个元素是否具有在其他元素中的特定类名

1 个答案: