Find div without id and change it's text-CodePudding

I want to remove "HOUSE" names from all these divs:

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>

As you can see these divs have no id or class to find them. I have tried with innerHTML or outer but no luck.

I would like to remove their text and just keep them as empty.

Any ideas?

CodePudding user response：

If you're using jQuery you can use the :contains selector:

$('div:contains(HOUSE)').text('')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><div>HOUSE</div></div>

<div><div>HOUSE</div></div>

<div><div>HOUSE</div></div>

<div><div>HOUSE</div></div>

<div><div>:)</div></div>

Otherwise, you'll have to select every div, iterate through each one and remove the textContent for the ones whose textContent contains "HOUSE":

document.querySelectorAll('div').forEach(e => e.textContent = e.textContent.includes("HOUSE") ? '' : e.textContent)

<div><div>HOUSE</div></div>

<div><div>HOUSE</div></div>

<div><div>HOUSE</div></div>

<div><div>HOUSE</div></div>

<div><div>:)</div></div>

CodePudding user response：

You could use xpath:

var xpath = "//div[text()='HOUSE']";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

As suggested here: How to get element by innerText

CodePudding user response：

You can remove HOUSE like this.

var divs = document.getElementsByTagName("div")
for (let div of divs) {
  if(div.innerHTML=="HOUSE")
  {
    div.innerHTML=""
  }
}

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>

<div><div style="padding:0!important;right:0!important;line-height:12px;display:block!important;font-size:8px!important;bottom:0!important;margin:0!important;text-align:center;position:absolute!important;opacity:0.8400000000000001!important;left:0!important;top:0!important;pointer-events:none">HOUSE</div></div>