jquery - 要素の親要素を削除できません

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

});

jsFiddle を確認する