Is It Possible To Remove A Button Inside A Javascript Dialog With No Access To Its Code-CodePudding

I use a tool to create reports using pre-defined widgets. The result of these reports are web pages (HTML javascript CSS). Because this html page is generated using that tool it uses many proprietary code (javascript libraries) that I have no access to edit them. Next picture is the main page

After click on Show Data menu a modal dialog is opened

The problem I have is: I need to remove the Add Data button that is inside a modal dialog after this dialog was opened.

Because I can put some html or javascript code on the main page using the tool. I tried to get and remove the button object using next code:

var obj = document.getElementsByClassName("item add mojo-theme-light mstrmojo-Button mstrmojo-WebButton");
  if (obj !== null && obj.length > 0) {
    obj[0].innerHTML = "";
    obj[0].className = "";
  }

However It doesn't work because the dialog is created after clicked the Show Data menu button (its source code is generated automatically after it is opened). So I got null reference all the time.

Second strategy: Because modal dialog is opened when Show Data menu button is clicked I tried to listen for Mouse Events using next code:

document.addEventListener("mousedown", removeAddDataButton);
function removeAddDataButton() {
  var obj = document.getElementsByClassName("item add mojo-theme-light mstrmojo-Button mstrmojo-WebButton");
  if (obj !== null && obj.length > 0) {
    obj[0].innerHTML = "";
    obj[0].className = "";
  }
}

Again the Add Button is displayed when dialog is opened but if make a click for a second time the button is removed because its code already exists. But I need a second click and the idea is remove the button immediately/automatically after the dialog is opened.

Next pictures show the code before and after the dialog is opened

CodePudding user response：

You're looking for a JS solution while a CSS solution is much simpler. Inject CSS to set the target button to display: none:

// one of these will hide it for sure
const extraCss = `.item.add.mojo-theme-light.mstrmojo-Button.mstrmojo-WebButton {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}`

const style = document.createElement("style")
style.textContent = extraCss;
document.head.appendChild(style)

No need for mutation observers or timers, or anything of the sort.