从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

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

Answer 2

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

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

Answer 3

给 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;
  }
});