Hide css in iframe if text contains a specific word

Question

I need to hide a div that loads a javascript element in an iframe. The div to hide must contain the text "Next"

Example:

<div class="alignNext">
<div class="inlineBlock nextAlign" elname="next"><button class="fmSmtButton next_previous navWrapper" type="button" elname="next" onclick="gotoNextPage(this);">
<em> Siguiente </em>
</button></div></div>

I have tried with

  <script>
  var divs = document.querySelectorAll(".alignNext");
Array.from(divs).forEach(function(div) {
  if (div.textContent.indexOf("Siguiente") >= 0 ) {
    div.style.display = "none";
  }
});
  </script>

But it doesn't work with the iframe.

The iframe code is:

<div id="zf_div_IsBaC6OI1EsmTbQpQNijKuyc2G6W7voKPIu077b1tZY"></div><script type="text/javascript">(function() {
try{
var f = document.createElement("iframe");   
f.src = 'https://forms.zohopublic.eu/how/form/SACMDPAGINADO/formperma/IsBaC6OI1EsmTbQpQNijKuyc2G6W7voKPIu077b1tZY?zf_rszfm=1';
f.style.border="none";                                           
f.style.height="278px";
f.style.width="90%";
f.style.transition="all 0.5s ease";// No I18N
var d = document.getElementById("zf_div_IsBaC6OI1EsmTbQpQNijKuyc2G6W7voKPIu077b1tZY");
d.appendChild(f);
window.addEventListener('message', function (){
var zf_ifrm_data = event.data.split("|");
var zf_perma = zf_ifrm_data[0];
var zf_ifrm_ht_nw = ( parseInt(zf_ifrm_data[1], 10) + 15 ) + "px";
var iframe = document.getElementById("zf_div_IsBaC6OI1EsmTbQpQNijKuyc2G6W7voKPIu077b1tZY").getElementsByTagName("iframe")[0];
if ( (iframe.src).indexOf('formperma') > 0 && (iframe.src).indexOf(zf_perma) > 0 ) {
var prevIframeHeight = iframe.style.height;
if ( prevIframeHeight != zf_ifrm_ht_nw ) {
iframe.style.height = zf_ifrm_ht_nw;
}   
}
}, false);
}catch(e){}
})();</script>

You can see the project at https://codepen.io/dlopezros/pen/GRjrgwQ

Thanks for the help.

Answer 1

Let's try this

JQuery(".alignNext").css("display","none");