Question

i am trying to delete the closest li element. the thing is that there is loop which is creating the li elements with same id. this is fine so far, but there is another loop which is doing the same job. in each li element, there is a js delete function which takes the id of each each li. but now, if i click the li element of the second loop, it is deleting the first li in the first loop. my js code for the first loop is this:

function del_contact_a(cid){
        $.ajax({
            url: "/del_contact_a/",
            data: {id:cid},
            type: "POST",
        }).success(function(){
            $('#'+cid).closest('li').remove();
        })
}

js code for the second loop is this:

function del_contact_ver(cid){
        $.ajax({
            url: "/del_contact_ver/",
            data: {id:cid},
            type: "POST",
        }).success(function(){
            $('#'+cid).closest('li').remove();
        })
}

my both loops are these:

{% if contact_a %}
{% for ac in contact_a %}
<li id="{{ac.id}}"> <a> {{ac.name}} {{ac.nachname}}</a> <a onclick="del_contact_a({{ac.id}})"> <img src="{{STATIC_URL}}images/erase.png" /> </a>  </li>
{% endfor %}
{% endif %}

..

{% if contact_a %}
{% for ac in contact_a %}
<li id="{{ac.id}}"> <a> {{ac.name}} {{ac.nachname}}</a> <a onclick="del_contact_ver({{ac.id}})"> <img src="{{STATIC_URL}}images/erase.png" /> </a>  </li>
{% endfor %}
{% endif %}

can someone give me clue please? thanks alot

Answer 1

You have the same id on the 2 loops for your li.
You should use a prefixe on each one, depending on your loops.

The first one :

<li id="a-{{ac.id}}">

The second one :

<li id="ver-{{ac.id}}">

And change in you “” accordingly

An id, must be unique as its name suppose it 😛

Additionaly, I don’t understand why you are using the closest method ?

$('#'+cid).remove();

should be enough.