How to disable all other links in a div on click of a link in div using javascript

Question

I am new to Javascript. I wish to disable all other links in a div on click of a link in div. If I click any link in that div, other links in that div should disable and unclickable.

This code is not making links unclickable on clicking any button . If any link is clicked, the other links in that div should disable and unclickable. For example, If accept link is clicked, the links accept, decline and counter offer links should be unclickable and disable.

Output

function disableButton() {
  document.querySelector("#notify-div a").removeAttribute("href");

}

<div id="notify-div">
  user_name has requested a bid price of bid for quantity of qty for mileage mileage_name of truck truck_name.
  <br> <a href='/truckianAccept/".$lastId."' id='accept' class='btn btn-primary' onclick='disableButton();'>Accept </a>
  <a href='/truckianDecline/".$lastId."' id='decline' class='btn btn-primary' onclick='disableButton();'>Decline </a> <a href='/wstCounterOffer/".$lastId."' id='counter' class='btn btn-primary' onclick='disableButton();'>Counter Offer </a>";
</div>

Answer 1

Instead of removing the href, you set a class with captures the pointer events in css.

function disableButtons() {
  const links = document.querySelectorAll("#notify-div a");

  links.forEach(function(link) {
    link.classList.add('disabled');
  });
}

CSS:

.disabled {
  pointer-events: none;
}

Please note, that href and onClick won't work together. You should pass a specific function to each link that handles the functionality and disables the buttons afterwards.