How can I remove from dom fully upon ajax return?

I trying to remove completely from DOM LI Elements and it's contents including it's checkbox input but haven't been successful.

I have the following function being called after ajax callback, but it removes the contents not the element it self and childs (readyState == 4):

function removepostview(str){

    document.getElementById('post'+str).innerHTML = "";
}

Sample LI

<li id="post58">Some Text Here<input type="checkbox" id ="postchk58" value="58" onclick="deletepost(this.value);" /></li>

Please note that no UL is specified in this scenario intentionally. The LI will be normally onto a UL / OL in all other scenarios with prop开发者_如何学编程er markup.

It is actually possible doing this without resulting to a js library:)

 var e=   document.getElementById('post'+str);
 e.parentNode.removeChild(e); 

There's a remove() method in jQuery for just such a task:

$('#post'+str).remove();

Your tags include jQuery, so why not try this:

$('#post' + str).remove();

Using jQuery:

function removepostview(str){
    $('#post'+str).remove();
}

Try this:

var d = document.getElementById('myUL');
var oldLI = document.getElementById('post'+str);
d.removeChild(oldLI);

function removepostview(str){
  var postLi = document.getElementById('post'+str);
  document.removeChild(postLi);
}