Error when using function deleteRow after load ajax jquery?
<pre><code>&lt;a class="checkModelButton" href="check.php"&gt;Check&lt;/a&gt;
&lt;div id="model_list"&gt;&lt;/div&gt;
</code></pre>

<p>include jquery and function deleteRow():</p>

<pre><code>jQuery('.checkModelButton').click(function(event){
   event.preventDefault();
   var url = jQuery(this).attr('href');
   jQuery.ajax({
         type: 'get',
         cache: false,
         url: url,
         success: function(html){
             jQuery('#model_list').html(html);
         }
   });
});
function deleteRow(id) {
    try {
        var table = document.getElementById('model_list');
        var rowCount = table.rows.length;
        for(var i=0; i&lt;rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox &amp;&amp; true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        } 
        jQuery("input[type=checkbox]:checked").each(function() { 
            jQuery(this).parents("tr").remove(); 
        });    

    } catch(e) {
        alert(e);
    }
}
</code></pre>

<p>in check.php return html is:</p>

<pre><code>&lt;input type="button" value="Delete Row" onclick="deleteRow('model_list')" /&gt;
&lt;table id="model_list"&gt;
   &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;#&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
      &lt;/tr&gt;
   &lt;/thead&gt; 
   &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="checkbox" value="1" name="model_id[]" class="item"&gt;&lt;/td&gt;
        &lt;td&gt;Nokia N71&lt;/td&gt;
      &lt;/tr&gt;
   &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>After loadding ajax, I checked on form input and click button Delete Row, but error can't delete this row And error is <code>alert(Table model_list is empty)</code>, how to fix it ?</p>
