CODEWITHSUNDEEP
htmlcss
UVIRE
UVIRE

Reputation: 25

Hide / Remove specific text within DIV

How can I hide specific text within the div element:

Here's the code: 

<div class="q-a-div">
  <hr>
  <span style="color: #0000ff">
       		<strong><strong>Blurred vision :</strong></strong>
       </span>
  <br> Answer Provided: Yes<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
  <span style="color: #0000ff">
       		<strong><strong>Please provide some further details :</strong></strong>
       	</span><br> Answer Provided: aaaaaaaaaaa<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
  <hr>
  <span style="color: #000000">
       		<strong><strong><span style="color: #0000ff">If your compliant is linked to calf pain, do you have any of the following symptoms in your affected calf:</span> </strong>
  </strong>
  </span><br> Answer Provided: Not Applicable, no calf pain.<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
  <hr>
  <span style="color: #0000ff">
       		<strong><strong>Considerable unexplained or unplanned weight loss, not linked to diet :</strong></strong>
       	</span><br> Answer Provided: Yes<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
  <span style="color: #0000ff">
       			<strong><strong>Please provide some further details :</strong></strong>
       	</span><br> Answer Provided: aaaaaaaaaaa<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
</div>
</div>

I would like to hide:

I tried to accomplish this with CSS attributes but I can't choose attribute based on text, therefore jQuery could be an option but I would much rather stick to JavaScript as I don't have much experience adding jQuery to the Wordpress page.

Please help and many thanks.

Upvotes: 0

Views: 134

Answers (3)

Simon Libbs
Simon Libbs

Reputation: 103

You can loop through all elements on a HTML Page and choose the ones you want to hide depending on the text.

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
    if(all[i].innerHTML == "Text you want to hide"){
        all[i].style.display = "none";
    }
}

Upvotes: 0

Terry
Terry

Reputation: 66123

Based on your markup you cannot do it using CSS alone, since the text is not wrapped in an element and there is no way you can identify/access them. You can, however, use JS to simply grab the innerHTML of the outer div, and use String.prototype.replace to remove the strings:

const div = document.querySelector('.q-a-div');
div.innerHTML = div.innerHTML.replace(/%(USER_COMMENTS|CORRECT_ANSWER)%/gi, '');


const div = document.querySelector('.q-a-div');
div.innerHTML = div.innerHTML.replace(/%(USER_COMMENTS|CORRECT_ANSWER)%/gi, '');
<div class="q-a-div">
  <hr><span style="color: #0000ff"><strong><strong>Blurred vision :</strong></strong></span><br> Answer Provided: Yes<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br><span style="color: #0000ff"><strong><strong>Please provide some further details :</strong></strong></span><br>  Answer Provided: aaaaaaaaaaa<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
  <hr><span style="color: #000000"><strong><strong><span style="color: #0000ff">If your compliant is linked to calf pain, do you have any of the following symptoms in your affected calf:</span> </strong>
  </strong>
  </span><br> Answer Provided: Not Applicable, no calf pain.<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
  <hr><span style="color: #0000ff"><strong><strong>Considerable unexplained or unplanned weight loss, not linked to diet :</strong></strong></span><br> Answer Provided: Yes<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br>
  <span
    style="color: #0000ff"><strong><strong>Please provide some further details :</strong></strong>
    </span><br> Answer Provided: aaaaaaaaaaa<br> Correct Answer: %CORRECT_ANSWER%<br> Comments Entered: %USER_COMMENTS%<br><br></div>
</div>

Upvotes: 1

Jason Landbridge
Jason Landbridge

Reputation: 1402

I think you can just do

<span style="display:none;">Comments Entered: %USER_COMMENTS%</span>

to hide the text.

Upvotes: 0

Related Questions