2016-06-18 11 views
0

nicht definiert ist, wenn es die Linie erreicht this.parentNode.removeChild(this);parentNode für tr

ich den Fehler

this.parentNode undefiniert

Im Debugger ich am Anfang pausieren dieser Aussage und sehen, dass "das" ist: Object[ tr#CMD01.selected ] was genau ich erwarte. Wie ist parentNode undefiniert? Ich habe hier nach ähnlichen Problemen gesucht und immer wieder Fälle gefunden, in denen "das" nicht korrekt ist, aber in meinem Fall wird es vom Debugger verifiziert.

$(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()' wird funktionieren - siehe die Antwort von jfriend00, warum Ihr Code fehlschlägt. –

Antwort

4

Wenn Sie eine jQuery-Methode implementieren, um den Wert von this, wenn es das jQuery-Objekt wird aufgerufen, nicht das DOM-Objekt. Daher existiert this.parentNode nicht, weil ein jQuery-Objekt keine Eigenschaft mit diesem Namen besitzt.

Sie können entweder .parent() von jQuery verwenden oder Sie können den tatsächlichen DOM-Knoten abrufen und dann .parentNode verwenden.

Wenn Sie nur zu einem Zeitpunkt auf immer die Verarbeitung eines einzelnen DOM-Objekt beabsichtigen, können Sie dies tun:

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

Wenn Ihr jQuery-Objekt mehrere Objekte in es haben kann, dann können Sie dies tun:

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

Oder, wie Sie feststellen können, Sie brauchen nicht einmal eine eigene Methode für diese. Wenn Sie ein jQuery-Objekt für die Zeile haben, können Sie einfach .remove() direkt darauf aufrufen.

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

Vielen Dank. Die benutzerdefinierte Methode loszuwerden ist die einfachste und macht genau das, was ich will. –

Verwandte Themen