Achor tag disable and enable once it's get refreshed

Question

I have to disable the acnhor tag after the ajax call is success. I tried
how to disable anchor tag's in jquery? https://forum.jquery.com/topic/how-to-disable-a-tag-links-in-jquery How to enable or disable an anchor using jQuery? jQuery - disable and enable an anchor tag based on condition

Nothing worked. This is my code

<div class="container col-md-offset-1">
        
            <div class="row-fluid top-space-20">
                <table id="table" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>role</th>
                            <th>status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr>
                            <td>{{using the each for loop }}</td>
                            <td><a id="deleteId" class="href-link" href="/goto" }}">{{
                                   my_data}}</a>
                            </td>
                           
                        </tr>
                       
                    </tbody>
                </table>
                
    <script>
        // Remove button event trigger
        $('#confirmdeletemodal').on('shown.bs.modal', function (e) {
            var triggeringElement = $(e.relatedTarget);
            $(this).find('#remove-button').attr('href', $(e.relatedTarget).data('href'));
            var modal = $(this)
            modal.find('.modal-body').text('Are you sure you wish to delete this ' + triggeringElement.data("jobrole") + ' data? ')
            $("#remove-button").on('click', function () {
                var jobid = triggeringElement.data('href');
                $.ajax({
                    type: 'POST',
                    url: '/delete',
                    data: { 'id': $(e.relatedTarget).data('href') },
                    success: function (data) {
                        console.log("Inside");
                        $("#deleteId").addClass('not-active').removeAttr("href");
                        var msg = "The role deleted is ";
                        $('#myModal').modal('show');
                        $('#myModal .modal-body p').html(msg);
                        console.log("outside");


                    }
                })

            })
        })

    </script>
    

I am listing set of data in the table. After performing this ajax operation I have to disable the anchor which is displayed in the table. How should I do it

Answer 1

You can just add class which disables pointer-events -

Sample -

$('#button').on('click', function() {
  $('a.link').addClass('disable-click');
});

.disable-click {
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>role</th>
      <th>status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>M</td>
      <td>P</td>
      <td><a id="deleteId" class="link" href="https://www.google.com">LINK</a></td>
    </tr>
  </tbody>
</table>
<button id="button">
Disable
</button>