点击链接删除Div

Question

I am doing a code in which I want to delete a div when its inner link("Delete") is clicked. I know this question might be repeating and I have tried so many methods but not working. I dont know what's the problem.

Here is my HTML Rendering Code:

<div id="ViewRows">
    <br>
    <div class="ViewRow"> NOS: FA Comment: finance
        <a class="deleteViewRow" href="#">Delete</a>
    <br>
    </div>
    <div class="ViewRow">
       NOS: TPA Comment: Assistance
       <a class="deleteViewRow" href="#">Delete</a>
       <br>
    </div>
</div>

Here is my javascript Code for removal of that div.

$("a.deleteViewRow").live("click", function () {
   $(this).parents("div.ViewRow:first").remove();
   return false;
});

I also tried following javascript:

$("#ViewRows").on("click", "a.deleteViewRow", function () {
    $(this).closest("div.ViewRow").andSelf().remove();
    return false;
});

I have tried same code on another page. It is working but when I applied the same logic in another page. It's not working. I know you all are right but I dont know whats problem. In firebug it's not even going into the function.

Answer 1

This should work:

$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
    // prevent browser from following link
    e.preventDefault();
    // ".andSelf()" can be skipped - once the parent div is removed, the link gets removed as well
    $(this).closest("div.ViewRow").remove();
});

Answer 2

this simple yet efficient code works fine: http://jsfiddle.net/L2CsH/

$("#ViewRows").on("click", "a.deleteViewRow", function () {
    $(this).parent().remove();
});

Answer 3

you need to prevent default action of link. event.preventDefault()

$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
    e.preventDefault();
    $(this).closest("div.ViewRow").remove(); //.andSelf() is not needed here. 
    //return false;
});

Demo : Remove Div JSFiddle