2016-06-18 2 views
0

Когда он достигает линии this.parentNode.removeChild(this);ParentNode не определено для тр

Я получаю ошибку

this.parentNode неопределен

В отладчике я паузу в начале этого заявления и посмотрите, что «это»: Object[ tr#CMD01.selected ], что я и ожидаю. Как parentNode неопределен? Я много искал похожие проблемы и продолжаю искать случаи, когда «это» неверно, но в моем случае это проверяется отладчиком.

$(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's .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

Большое спасибо. Избавление от пользовательского метода является самым простым и делает именно то, что я хочу. –

Смежные вопросы