I have a paragraph displaying over 10,000 lines of text and wanted to onclick remove all of them from displaying without hiding the paragraph they're displayed in (ie individually remoing each line of text by changing the span style="display:block" to "display:none"). I have other elements in the <p> that I don't want to be hidden, only the span's.
I can do them line by line, but that is not viable for the number of lines involved. Is there a quicker way to do this?
function uncheckAll() {
document.getElementById("Box1").style.display = "none";
document.getElementById("Box2").style.display = "none";
document.getElementById("Box3").style.display = "none";
document.getElementById("Box4").style.display = "none";
document.getElementById("Box5").style.display = "none";
}<body>
<p id="main" style="display:block" contenteditable="true">
<span id="Box1" style="display:block">text 1.</span>
<span id="Box2" style="display:block">text 2.</span>
<span id="Box3" style="display:block">text 3.</span>
<span id="Box4" style="display:block">text 4.</span>
<span id="Box5" style="display:block">etc.....</span>
</p>
<button style="height:50%;width:10%" onClick="uncheckAll()">Clear</button>
</body>You can try this
const uncheckAll = () => {
var elements = document.querySelectorAll('#main span');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
};#main span {
display: block;
}<p id="main" style="display:block" contenteditable="true">
<span id="Box1">text 1.</span>
<span id="Box2">text 2.</span>
<span id="Box3">text 3.</span>
<span id="Box4">text 4.</span>
<span id="Box5">etc.....</span>
</p>
<button style="height:50%;width:10%" onClick="uncheckAll()">Clear</button>its easier
const uncheckAll = _ => {
document.getElementById('#main').classList.add('hide-all');
};.hide-all > span { display:none; }