How to remove id with double colon via jQuery?

Question

How to remove an id with double colon?

What I tried:

$('[id*="Vendor_Name::users"]').remove();
$("#Vendor_Name\:\:users").remove();
$(document.getElementById("Vendor_Name::users")).remove();
$('li[id*="Vendor_Name::users"]').remove();
$('[id="Vendor_Name::users"]').remove();
$("li#Vendor_Name\:\:users").remove();

Nothing works. Removing other elements are working, so it has to do with ::

I can remove it via CSS, though, but I want to remove the element completely from DOM.

#Vendor_Name\:\:users {
  display: none;
}

EDIT: Got it working with MutationObserver. In case anybody needs it:

const DEL_SELECTOR = '#Vendor_Name\:\:users';

            const mo = new MutationObserver(onMutation);
// in case the content script was injected after the page is partially loaded
            onMutation([{addedNodes: [document.documentElement]}]);
            observe();

            function onMutation(mutations) {
                const toRemove = [];
                for (const {addedNodes} of mutations) {
                    for (const n of addedNodes) {
                        if (n.tagName) {
                            if (n.matches(DEL_SELECTOR)) {
                                toRemove.push(n);
                            } else if (n.firstElementChild && n.querySelector(DEL_SELECTOR)) {
                                toRemove.push(...n.querySelectorAll(DEL_SELECTOR));
                            }
                        }
                    }
                }
                if (toRemove.length) {
                    mo.disconnect();
                    for (const el of toRemove) el.remove();
                    observe();
                }
            }

            function observe() {
                mo.observe(document, {
                    subtree: true,
                    childList: true,
                });
            }

user_6082280 · Answer

Could use jQuery.escapeSelector and then remove the element.

which Escapes any character that has a special meaning in a CSS selector.

const escapedSelector = $.escapeSelector("Vendor_Name::users");
console.info(escapedSelector); // Vendor_Name\:\:users

$('#' + escapedSelector).remove();






Test paragraph before list
Test list

note: That this method was added in jQuery version 3.

Solution for older version of jQuery: source taken from the jQuery core FAQ section

function jq( myid ) {
  return "#" + myid.replace( /(:|\.|$$|$$|,|=|@)/g, "\$1" );
}
console.info(jq('Vendor_Name::users')) // #Vendor_Name\:\:users
$(jq('Vendor_Name::users')).remove()






Test paragraph before list
Test list

user_1175966 · Answer

You can see from the following test of every example you gave that they are all valid and all find the element...assuming it exists when you run it.

The js-tree class indicates this is probably a tree plugin that uses an internal state to render various nodes. You probably want to use the API of the plugin to do what is needed

const selectors = [
    '[id*="Vendor_Name::users"]',
    "#Vendor_Name\:\:users",
    document.getElementById("Vendor_Name::users"),
    'li[id*="Vendor_Name::users"]',
    "li#Vendor_Name\:\:users"
]

const allValid = selectors.every(s=> $(s).length > 0)
console.log('allValid =', allValid)



Test

How to remove id with double colon via jQuery?

2 Answers