I have a basic HTML webpage.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. ... [truncated for brevity]
</p>;
</body>
</html>A JS file hosted on an external site modifies the page by displaying a div in the center with two buttons.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<div class="qc-cmp-ui-container qc-cmp-showing">
<div class="qc-cmp-ui qc-cmp-showing" id="qcCmpUi">
... [truncated for brevity]
</div>
</div>
</body>
</html>The aim is to hide the div with the class qc-cmp-ui-container.
I attempted to use jQuery:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM loaded and parsed");
$('.qc-cmp-ui-container').hide();
});However, the div remains visible. How can I successfully hide it?