删除Div链接点击

Question

我正在做一个代码，当我想删除一个div的内部链接（“删除”）被点击。我知道这个问题可能会重复，我尝试了很多方法，但没有成功。我不知道有什么问题。

这是我的HTML渲染代码：

<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> 

这是我的JavaScript代码去除该分区。

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

我也试过以下的javascript：

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

我曾尝试在另一页上相同的代码。它正在工作，但是当我在另一个页面中应用相同的逻辑时。它不工作。我知道你们都是对的，但我不知道最新的问题。在萤火虫它甚至没有进入功能。

Answer 1

这个简单而高效的代码工作正常：http://jsfiddle.net/L2CsH/

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

Answer 2

您需要防止链接的默认操作。 event.preventDefault()

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

演示：Remove Div JSFiddle

Answer 3

这应该工作：

$("#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(); 
});