give Id to td tag and hide with jquery

here is solution

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

You need to add below code in your success action.

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

js:

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

or jquery

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

css:

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

I’ve made an AdminCP to manage all my recipes, users, details etc… So, I’m running this code here that move my recipes from shared to drafted. Everything is fine, it’s normally working but I would like to hide the TD that It contains the button that I’ve clicked.

     $(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>

What can I do? Any idea? Thanks everyone! 🙂