无法删除元素的父元素

Question

我的结构是：

<p>
        <span>
            <input type="text" class="key" value="21">
        </span>
        <span>   
            <input type="text" class="value" value="55">

        </span>
        <span>    
            <a href="#" class="updateAction" data-setting-id="1">update</a>
            <a href="#" class="deleteAction" data-setting-id="1">delete</a>
        </span>
    </p>

每当点击删除链接时，我会尝试删除这样的父元素：

 $(this).parent().parent().hide();
 $(this).closest('p').hide();

Answer 1

关闭输入标记并调用preventDefault，它将起作用。

http://jsfiddle.net/P3tEw/

$(document).on("click", ".deleteAction", function (e) {
    e.preventDefault();
    $(this).closest('p').hide();
});

Answer 2

尝试

$(".deleteAction").click(function(e){

    e.preventDefault();

    var $this = $(this);

    $this.closest('p').fadeOut('slow',function(){
        $(this).remove();
   }); // with a fadeOut effect

});

Check the jsFiddle