rebuild a content of a Div tag in complete function of $.ajax

I have a 4 column table of products in template,each item in table has an anchor with onclick like this:

<div id="tablepro">
     <table>
         <tr>
         {% for product in cat.products.all %}
             {% if forloop.counter|divisibleby:4 %}
                 </tr>
                 <tr>
                     <td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
             {% else %}
                     <td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
             {% endif %}
         {% endfor %}
     </table>
 </div>
 

in remove function I have :

function remove(id)
 {
     var URL='{% url CompanyHub.views.catDetails company.webSite,cat.id %}';
     URL+='delpro/'+id+'/';
     $jqr.ajax({
         url:URL,
         type:'POST',
         complete:function(){
             var str='<table><tr>';
             {% for product in cat.products.all %}
                 {% if forloop.counter|divisibleby:4 %}
                     str+='</tr><tr>';
                     str+='<td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
                 {% else %}
                     str+='<td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
                 {% endif %}
             {% endfor %}
             str+='</table>';
             $jqr('#tablepro').html(str);
         },
         error:function(){
             alert('Error');
         }
     });
 }
 

in views.py :

def deleteProduct(request,key,cat_id,pro_id):
     try:
         company=Company.objects.get(webSite__iexact=key)
     except Company.DoesNotExist:
         Http404
     cat=Category.objects.get(pk=cat_id)
     if pro_id:
         try:
             product=Product.objects.get(pk=pro_id)
             product.delete()
         except Product.DoesNotExist:
             Http404
     return render_to_response('CompanyHub/Company/%s/cat_details.html'%(company.theme),{'company':company,'cat':cat}, context_instance=RequestContext(request))
 

as U see I've returned cat object that now a product object has removed from its list,but I can't get my Div updated in template!

any suggestion is appreciated

---