特定の要素のみを削除する方法について

Question

<div id="sortable">
    <div class="item text-item">
      <p style="margin: 0px;">テキスト1</p>
      <ul class="editpager clearfix unvisible">
        <li class="first-order">一番上へ</li>
        <li class="minus-order">上へ</li>
        <li class="plus-order">下へ</li>
        <li class="last-order">一番下へ</li>
        <li class="edit-item">編集</li>
        <li class="delete-item">削除</li>
      </ul>
    </div>
    <div class="item text-item">
      <p style="margin: 0px;">テキスト2</p>
      <ul class="editpager clearfix unvisible">
        <li class="first-order">一番上へ</li>
        <li class="minus-order">上へ</li>
        <li class="plus-order">下へ</li>
        <li class="last-order">一番下へ</li>
        <li class="edit-item">編集</li>
        <li class="delete-item">削除</li>
      </ul>
    </div>
</div>

上記のHTMLコード内で、削除をクリックして特定の要素だけ削除するのが目的なのですが（テキスト1の削除をクリックしたらテキスト1の要素だけを削除したい）、クラス名が同じなので$("p").remove();ではテキスト1,2の両方とも消えてしまいます(下記コード参照)。

$('#sortable').on('click','.delete-item', function() {
    if(confirm('本当に削除してよろしいですか？')){
	   $('p').remove();
    }
});

どのようにセレクタを指定すれば良いのでしょうか。回答よろしくお願いします。

Answer 1

どのようにセレクタを指定すれば良いのでしょうか。

セレクタでは、「いまどれがクリックされたか」の情報を取るのには向きません。

$(this)としてクリックされたエレメントを取得して、そこからたどっていくのがいいかと思います。

Answer 2

  $('.delete-item').on('click',function(){
     if(confirm('本当に削除してよろしいですか？')){
       $(this).closest('.item').remove();
     }
  });