如何从多个元素中删除一个类，然后仅将一个类添加到 JavaScript 中选择的一个类？

Question

I have written a small JavaScript program which adds a right click context menu on multiple elements (p tags in this example). When you right click each text, the context menu appears correctly and disappears when left clicking outside the menu.

However when you right click one element and immediately right click the other element both context menus appear. I want to be able only show one menu at a time. How do I clear all '.show' classes first, then add the class only to the one that was right clicked? I tried adding a if statement into the 'show' function but the behaviour is still the same. See fiddle below. Thanks

https://jsfiddle.net/Lwdtoc12

The js:

document.addEventListener('DOMContentLoaded', function () {

    let rightClickElement = document.querySelectorAll('.right-clickable-element');

    rightClickElement.forEach(function (element) {
        let menu = element.parentElement.querySelector('.right-clickable-menu');
        element.addEventListener('contextmenu', function (e) {
            // hide default right click menu
            e.preventDefault();
            // show custom menu
            showMenu(e, menu);
            // hide custom menu
            hideMenu(menu);
        });
    });

    function showMenu(e, menu) {
        if (menu.classList.contains('show')) {
            menu.classList.remove('show');
        } else {
            menu.classList.add('show');
            menu.style.top = e.clientY - 10 + 'px';
            menu.style.left = e.clientX - 10 + 'px';
        }
        //console.log(menu.classList.contains(''));

    }

    function hideMenu(menu) {
        document.addEventListener('click', function (e) {
            if (e.target !== menu && !menu.contains(e.target)) {
                menu.classList.remove('show');
            }
        });
    }

});

Answer 1

In showMenu method, get all menu items and remove .show class. Then toggle the class for the current selected menu.

function showMenu(e, menu) {
  let allMenu = document.querySelectorAll('.right-clickable-menu');

  allMenu.forEach(function(el) {
    el.classList.remove('show');
  });

  menu.classList.toggle('show');
  menu.style.top = e.clientY - 10 + 'px';
  menu.style.left = e.clientX - 10 + 'px';
}