Discussions » Development

Remove elements in Steam Badge page

§
Posted: 2020-03-29
Edited: 2020-03-29

Remove elements in Steam Badge page

Hello,

I have created a button which calls a function that removes specific elements. To be precise, it removes all rows with badges that are ready to craft.

Here is my code :

var b = document.createElement('a');
b.setAttribute('id', 'filter');
b.setAttribute('class', 'btn_darkblue_white_innerfade btn_medium');
b.innerHTML = '<span>Filter</span> ';

var wrapper = document.getElementsByClassName("profile_xp_block")[0];
wrapper.appendChild(b);

document.getElementById ("filter").addEventListener (
    "click", ald, false
);

function ald() {
    for (var i=0;i<document.getElementsByClassName("badge_row is_link es-has-ce-link").length;i++){
        if (document.getElementsByClassName("badge_row is_link es-has-ce-link")[i].innerText.includes("Ready")){
            var elem = document.getElementsByClassName("badge_row is_link es-has-ce-link")[I];
                elem.parentNode.removeChild(elem);
        }
    }
}

The problem is that the function only removes half of them with every click. (IE: 100-50-25-12-6-3-1-0)

I have tried this when the page was loaded, also tried in Chrome console and worked as it should.

wOxxOmMod
§
Posted: 2020-03-29

getElementsByClassName returns a dynamically updated collection so every time you delete the element this collection is automatically reduced by one element. The simplest solution is to switch to querySelectorAll:

for (const el of document.querySelectorAll('.badge_row.is_link.es-has-ce-link')) {
  if (el.textContent.includes('Ready')) el.remove();
}
§
Posted: 2020-03-29

@wOxxOm said: getElementsByClassName returns a dynamically updated collection so every time you delete the element this collection is automatically reduced by one element. The simplest solution is to switch to querySelectorAll:

for (const el of document.querySelectorAll('.badge_row.is_link.es-has-ce-link')) {
  if (el.textContent.includes('Ready')) el.remove();
}

Didn't think about that, thank you!

remove() for some reason is not working for me, using el.parentNode.removeChild(el); instead

wOxxOmMod
§
Posted: 2020-03-29

.remove() should work since Chrome 23 so it sounds like you're using a really ancient browser.

§
Posted: 2020-03-29

@wOxxOm said: .remove() should work since Chrome 23 so it sounds like you're using a really ancient browser.

Using the latest version of Chrome, 80.0.3987.149

wOxxOmMod
§
Posted: 2020-03-29

I see. Apparently that site has somehow broken remove()

Post reply

Sign in to post a reply.