從 ajax 隱藏 div

Question

我已經創建了一個 AdminCP 來管理我所有的食譜、用戶、詳細信息等……所以，我在這里運行這段代碼，將我的食譜從共享轉移到草稿。 一切都很好，它正常工作，但我想隱藏它包含我點擊的按鈕的 TD。

     $(document).on("click", "[data-action]", function(e){
        e.preventDefault();
        
        if(window.confirm("Are you sure to draft this Article?")){
            var draft_id = $(this).attr("data-id");
            var action = $(this).attr("data-action");
           
            $.ajax({
                url: "actions-recipe",
                type: "post",
                data: {
                    draft_id:draft_id,
                    action:action
                },
                success: function(data){
                    // I would like to hide the td that it contains this button
                }
            });
        }else{
            return false;
        }
    });

Html：

                 <td class="t-c dropdown">
                    <span class="dropbtn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
                    <div class="drop-content">
                    <a id="edit" href="modify-news?nid='.$rows["id"].'" class="icon">Edit</a>
                    <a id="draft" role="button" class="icon" data-id="'.$rows["id"].'" data-action="drafted">Draft</a>
                    <a id="delete" role="button" class="icon" data-id="'.$rows["id"].'" data-action="deleted">Delete</a>
                    </div>
                </td>

我能做些什么？ 任何想法？ 感謝大家： ：）

Answer 1

您需要在成功操作中添加以下代碼。

success: function(data){
     $('a[data-action = '+action+']').closest('td.dropdown').hide();
}

Answer 2

為 td 標簽提供 ID 並使用 jquery 隱藏

這是解決方案

HTML

<td id="myid" class="t-c dropdown">
  <span class="dropbtn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
  <div class="drop-content">
    <a id="edit" href="modify-news?nid='.$rows["id"].'" class="icon">Edit</a>
    <a id="draft" role="button" class="icon" data-id="'.$rows["id"].'" data-action="drafted">Draft</a>
    <a id="delete" role="button" class="icon" data-id="'.$rows["id"].'" data-action="deleted">Delete</a>
  </div>
</td>

JAVASCRIPT

$(document).on("click", "[data-action]", function(e){
  e.preventDefault();

  if(window.confirm("Are you sure to draft this Article?")){
    var draft_id = $(this).attr("data-id");
    var action = $(this).attr("data-action");

    $.ajax({
      url: "actions-recipe",
      type: "post",
      data: {
          draft_id:draft_id,
          action:action
      },
      success: function(data){
          $("#myid").hide()
      }
    });
  }else{
    return false;
  }
});

Answer 3

js：

document.querySelector('td.t-c.dropdown').classList.add('hidden');

或 jquery

$('td.t-c.dropdown').addClass('hidden');

css：

td.t-c.dropdown.hidden {
    display:none;
}