I have a page which opens in Modal window and I want to hide <i> tag whose data-original-title="Close" after page loads with the following code but it doesn't work: I am using SAAS system where there is an option to open a page in MODAL window.
function startUp() {
$("i[data-original-title='Close']").hide();
}
<body onload="startUp(); return true;">
</body>
I tried document.addEventListener('DOMContentLoaded'... as well
Given your use case and the JS code being supplied by a third party, I would recommend just using a CSS rule in your styles.css (or whatever file name) file.
.sswindow-backdrop i[data-original-title=Close] {
display:none !important;
}
try
function startUp() {
$("i[data-original-title='Close']").attr("style", "display:none!important");
}
Attribute selectors use double quotes (") & not single quotes ('). jQuery does not throw any error, if the element does not exist in the DOM. So better use Vanilla js to debug:
var closeBtn = document.querySelector('i[data-original-title="Close"]');
closeBtn.style.display = 'none';
You have not provided enough code or DOM screenshot in your question, but I strongly suspect you the modal's content is in an iframe, in which case it is in a separate DOM.
var iframe = document.querySelector('iframe');
iframe.addEventListener('load', (evt)=> {
// hide close button here.
});