7

jQueryに問題があり、クラスに基づいていくつかの要素を削除しています。http://jsfiddle.net/JBKp4/1/を参照してください

itemRowで削除リンクをクリックすると、そのアイテムのoptionRowとcommentRowも削除されます。しかし、私は行のクラスを決定することはできません。

誰かが私を助けてくれることを願っています。ありがとうございました！

4

6 に答える 6

11

あなたのコードはもっと簡単にできます:

$('body').on('click', '.delete', function() {
    var $tr = $(this).closest('tr');
    if ($tr.attr('class') == 'itemRow') {
        $tr.nextUntil('tr[class=itemRow]').andSelf().remove();
    }
    else {
        $tr.remove();
    }
});

ここで動作することを確認してください：http://jsfiddle.net/RASG/MeaRQ/

于 2012-10-18T16:50:01.907 に答える
8

セレクターでこれを行うことができます

$(".className").remove();

<tr class"itemRow">あるはずのタイプミスがあります<tr class="itemRow">

于 2012-10-18T16:38:58.083 に答える
2

他の人が指摘したように、class属性を修正してください。

JavaScript も少しきれいにすることができます。

$(document).ready(function() {
    $('body').on('click', '.itemRow .delete', function() {
        $(this).parents('tr').nextUntil('.itemRow').andSelf().remove();
    });

    $('body').on('click', '.optionRow .delete', function() {
        $(this).parents('tr').remove();
    });
});​

デモ: http://jsfiddle.net/JBKp4/35/

于 2012-10-18T16:49:35.683 に答える
1

行をネストします。アイテムごとにテーブルに新しい行を作成するのではなく、それらを階層的にネストします。

<table class="items">
    <tr class="item">
        <table class="options">
            <tr class="option">
                <table class="comments">
                    <tr class="comment">
                    </tr>
                </table>
            </tr>
        </table>
    </tr>
</table>

正直なところ、これにはテーブルを使用しないことをお勧めします。コンテンツが表形式のデータにならないように見えるため、Tables はレイアウトには意味がありません。代わりに Div を使用してください。

于 2012-10-18T16:43:52.780 に答える
1

=他の人が指摘した問題を修正します。それだけではありません。

項目をそのオプションに関連付ける方法が必要です。html を更新することをお勧めします。

<tr class="itemRow" id="item1">
...
<tr class="optionRow item1">
...

optionRowには、クラスとして属しているアイテムの ID が必要であることに注意してください。そうすれば、アイテム行を削除すると、次のようなことができます。

$("." + this.id).remove();

参照: http://jsfiddle.net/JBKp4/11/

これをしたくない場合 (または何らかの理由でできない場合) は、より複雑になります。.next()基本的に、別のTRに遭遇するか、次のTRがなくなるまで、itemRow TRの取得を続ける必要が.itemRowあります。

于 2012-10-18T16:44:12.497 に答える
0

まず、あなたのマークアップが盗聴されました。要素=のクラス属性がありませんでした。trクリーンなマークアップにより、JS 側の管理がはるかに簡単になります。マークアップを修正し、よりセマンティックになるようにリファクタリングすることをお勧めします (<dl>またはのような要素を使用して、データをグループ化して意味のある構造にします<ul>)。

優れた HTML = 少ない作業。

次に、bodyと.delete要素にバインドしていました。これは、jQuery が実行しなければならないイベント監視に関しては、かなりのオーバーヘッドです。達成したい機能のタイプには不要です。イベントを追跡したい要素にのみバインドし、コールバックを使用して関連するケースを処理します。

<tr>最後に、これらの行が削除しようとしている行に関連していることを示す、要素をリンクするものはまったくありません。したがって、スクリプトは 1 行のみを削除していました。data-attributesおよびその他の要素属性を使用して、ターゲット要素を相互にリンクできます。私が何を意味するかを示すために、あなたのフィドルを更新しました。更新されたフィドル...

改訂された jQuery スクリプトは次のとおりです。

jQuery( function(){
    $('.delete').click( function(){
        var obj = $( this ); // your delete link
        var table = obj.closest('table'); // the containing table
        var trgroup = obj.attr('data-group'); // a data-attribute that links your other elements together

        if( trgroup ) // If the attribute is available continue...
        {
            console.log( table.find('tr[rel="' + trgroup + '"]') );
            // Find all related element and remove them.
            table.find('tr[rel="' + trgroup + '"]').empty().remove();
        }

        // Remove the table row of the executing link and it's children.
        obj.closest('.itemRow').empty().remove();
    });
} );

単に .remove() の代わりに empty().remove() を使用すると、おそらく少し失敗するでしょうが、それは私自身の好みです。

于 2012-10-18T17:07:44.480 に答える