destroy a particular li and it content after clicking a link

I have开发者_开发知识库 this

<ul>
    <li id="any_list">Content to be destroyed</li>
</ul>

and this link: <a href="#" onclick="return deleteList(document.getElementById('any_list'))">remove the list "#any_list"</a>

How can I write the deleteList() function in order to the list #any_list and its content?

---

You can get an element's parent using the parentNode property and you can remove a child element using the removeChild method. Therefore:

function deleteList(element) {
    element.parentNode.removeChild(element);
}

---

It's better not to pollute the markup. Give the link an id first.

<a href="#" id="delete_any_list">remove the list "#any_list"</a>

Then simply

$('#delete_any_list').click(function(e){
  $('#any_list').remove(); 
     e.preventDefault(); 
});

---

http://jsfiddle.net/rMPdn/1/

Try this, example above: -

$("#any_list").each(function() {
        $(this).remove(); 
});

---

First, add an id to your anchor and remove any inline Javascript:

<a href="#" id="delete_any_list">remove the list "#any_list"</a>

[it's considered poor practice these days to ever actually put any JS code directly into the markup].

Then, in your jQuery document.ready function add this:

$('#delete_any_list').click(function(ev) {
    $('#any_list').remove();
});

See http://jsfiddle.net/alnitak/MbZpV/

---

$(function(){
    $("#delete_any_list").click(function(e){
      e.preventDefault();
      $("#any_list").remove();
    });
});

<a href="#" id="delete_any_list">Delete any list</a>