2016-06-18 12 views
0

ために定義されていません「this」はObject[ tr#CMD01.selected ]で、これは私が期待しているものです。 parentNodeはどのように定義されていませんか?私はここで似たような問題を探し出し、 "this"が正しくないケースを見つけていますが、私の場合はデバッガで検証されています。のparentNodeは、それがラインに<code>this.parentNode.removeChild(this);</code></p> <p>に達したとき、私はエラー</p> <blockquote> <p>this.parentNodeが、私はその文の先頭で一時停止し、デバッガで</blockquote> <p> </p>未定義で取得TR

$(document).ready(function() { 
 
    \t $.fn.deleteThisRow = function() { 
 
    \t \t this.parentNode.removeChild(this); 
 
    \t }; 
 
    }); 
 
    
 
    function deleteRow() { 
 
    \t $("#theList tr.selected").deleteThisRow(); 
 
    }
.selected { 
 
\t \t background-color: yellow 
 
\t } \t
<body> 
 
    \t <center id='bg'> 
 
    \t <table id="cmdList"> 
 
    \t \t <thead> 
 
    \t \t \t <tr id="hdrow"> 
 
    \t \t \t \t <th>Col1</th> 
 
    \t \t \t \t <th>Col2</th> 
 
    \t \t \t \t <th>Col3</th> 
 
    \t \t \t </tr> 
 
    \t \t </thead> 
 
    \t \t <tbody id="theList"> 
 
    \t \t \t <tr id="CMD00"> 
 
    \t \t \t \t <td>A1</td> 
 
    \t \t \t \t <td>A2</td> 
 
    \t \t \t \t <td>A3</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr id="CMD01" class="selected"> 
 
    \t \t \t \t <td>B1</td> 
 
    \t \t \t \t <td>B2</td> 
 
    \t \t \t \t <td>B3</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr id="CMD02"> 
 
    \t \t \t \t <td>C1</td> 
 
    \t \t \t \t <td>C2</td> 
 
    \t \t \t \t <td>C3</td> 
 
    \t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
\t <table id="buttons"> 
 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t \t <button onclick='deleteRow()'>Delete</button> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
\t </center> 
 
    </body>

+0

'this.remove()'が動作します - コードが失敗する理由についてのjfriend00の回答を参照してください。 –

答えて

4

あなたはjQueryのメソッドを実装する場合、それが呼び出されthisの値はjQueryオブジェクトではなく、DOMオブジェクトになります。したがって、this.parentNodeは、jQueryオブジェクトにその名前のプロパティがないために存在しません。

jQueryの.parent()を使用することも、実際のDOMノードを取得して.parentNodeを使用することもできます。あなたがしか一度に単一のDOMオブジェクトを処理する予定がある場合は

、あなたがこれを行うことができます:

$.fn.deleteThisRow = function() { 
    this[0].parentNode.removeChild(this[0]); 
}; 

をお使いのjQueryオブジェクトは、その中の複数のオブジェクトを有することができる場合は、これを行うことができます。

$.fn.deleteThisRow = function() { 
    this.remove(); 
}; 

それとも、あなたが気づくことのように、あなたも、このためにカスタムメソッドを必要としません。行のjQueryオブジェクトがある場合は、.remove()を直接呼び出すことができます。

function deleteRow() { 
    $("#theList tr.selected").remove(); 
} 
+0

ありがとうございます。カスタムメソッドを削除するのは最も簡単で、まさに私が望むものです。 –

関連する問題

 関連する問題