title: How to delete li element in ajax response function
body: <p>I am trying to delete the <code>li</code> element which is the parent of the clicked <code>a</code> element. </p>
  
  <p>This is my code: </p>
  
  <pre><code>function vanish(id_arg){
          $.ajax({
              url: "/vanish/",
              type: "POST",
              data: {id_to_delete: id_arg},
          }).success(function(data){
             document.getElementsByTagName('li').getElementById(id_arg).remove();
          });
      }
  </code></pre>
  
  <p>and this is my html: </p>
  
  <pre><code>{% for i in p %}
  &lt;li id="{{i.id}}"&gt; &lt;a&gt;{{i.name}}&lt;/a&gt;&lt;a onclick="vanish({{i.id}})" class="item"&gt;delete&lt;/a&gt;&lt;/li&gt;    
  {% endfor %}
  </code></pre>
  
  <p>p is the query response containing name and id. </p>
  
  <p><code>vanish()</code> will delete the item from database and as a ajax response I want to delete the item from page also. I need delete and not hide.</p>
  
  <p>My problem is that it is not deleting from the page, I am trying to catch the <code>li</code> with javascript and <code>remove()</code> it but never find the right code for it.</p>