Django inline formset(UI) delete/remove

[Ajay Kumar]

I'm trying to do a inline formset with UI not with dajngo built in inlineformset_factory form.Here i'm done with add_view and edit_view.Here in the edit view i can update the existing record for the both parent and child model,and can add new record to the child model.But i cant remove the existing record from the child model in inline formset.Every thing is fine working at client side.When i click remove button from the UI, the record is removed by javascript,But in server side, in the edit_view the #Delete Existing record block cloud take the delete/remove functionality.I tried in many possible ways but i can't make the delete query for the removed items form the client side.

models.py

from django.db import models

class Category(models.Model):
    name        =   models.CharField(max_length=128)

    def __unicode__(self):
        return self.name

class Product(models.Model):
    category    =   models.ForeignKey(Category)
    name        =   models.CharField(max_length=128)
    price       =   models.CharField(max_length=128)

views.py

def add(request):
    context =  RequestContext(request)
    if request.method == 'POST':
        category = Category.objects.create(name = request.POST['category'])
        try:
            for n in range(1,7):
                product = Product.objects.create(category= category,name=request.POST['name_'+str(n)],price=request.POST['price_'+str(n)])
        except KeyError:
            pass
        return HttpResponseRedirect('/')
    return render_to_response('add.html',context)

def edit(request,pk):
    category = get_object_or_404(Category,id=pk)
    product = Product.objects.filter(category=category)
    product_count = product.count()
    context =  RequestContext(request)
    if request.method == 'POST':
        for c in Category.objects.filter(id = category.id):
            c.name = request.POST['category']
            c.save()
            try:
                #Update Existing record(child)
                for p,n in zip(Product.objects.filter(category = c),range(1,7)):
                    p.name = request.POST['name_'+str(n)]
                    p.price = request.POST['price_'+str(n)]
                    p.save()
            except KeyError:
                #Delete Existing record(child)
                try:
                    for d in range(1,7):
                        for i in Product.objects.all().filter(name=request.POST.get('name_'+str(d)),price=request.POST.get('price_'+str(d))):
                            print i.name

                except KeyError:
                    pass
            else:
                #Add new record(child)
                try:
                    for r in range(1,7):
                        product,created = Product.objects.update_or_create(category= category,name=request.POST['name_'+str(r)],price=request.POST['price_'+str(r)])
                except KeyError:
                    pass
        return HttpResponseRedirect('/')
    args = {'category':category,'product':product,'product_count':product_count}
    return render_to_response('edit.html',args,context)

add.html

<h1>Add</h1>
<script type="text/javascript">
var i = 1;
function addProduct(){
        if (i <= 5){
                i++;    
        var div = document.createElement('div');
        div.innerHTML = 'Name:<input type="text" name="name_'+i+'" >Price:<input type="text" name="price_'+i+'" ><input type="button" value="-" onclick="removeProduct(this)">';
        document.getElementById('products').appendChild(div);
        }
}

function removeProduct(div) {       
    document.getElementById('products').removeChild( div.parentNode );
        i--;
}
</script>

<form method="post" action="/add/">{% csrf_token %}
    <label>Category</label>
    <div>
    <input type="text" name="category">
    </div>
    <label>Product</label>
    <div id="products">
        <input type="button" id="add_product()" onClick="addProduct()" value="+" />(limit 6)<br>
        Name:<input type="text" name="name_1">Price:<input type="text" name="price_1">

    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

edit.html

<h1>Edit</h1>
<script type="text/javascript">
var i = {{product_count}};

function addProduct(){
        if (i <= 5){
                i++;    
        var div = document.createElement('div');
        div.innerHTML = 'Name:<input type="text" name="name_'+i+'" >Price:<input type="text" name="price_'+i+'" ><input type="button" value="-" onclick="removeProduct(this)">';
        document.getElementById('products').appendChild(div);
        }
}

function removeProduct(div) {       
    document.getElementById('products').removeChild( div.parentNode );
        i--;
}
</script>

<form method="post" action="/edit/{{category.id}}/">{% csrf_token %}
    <label>Category</label>
    <div>
    <input type="text" name="category" value="{{category}}">
    </div>
    <label>Product</label>


    <div id="products">
        <input type="button" id="add_product()" onClick="addProduct()" value="+" />(limit 6)
        {% for list in product %}
        <div>
            Name:<input type="text" name="name_{{ forloop.counter }}" value="{{list.name}}">Price:<input type="text" name="price_{{ forloop.counter }}" value="{{list.price}}"><input type="button" value="-" onclick="removeProduct(this)">
        </div>
        {% endfor %}
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>