Tengo un párrafo que muestra más de 10,000 líneas de texto y quería hacer clic en eliminarlas todas para que no se muestren sin ocultar el párrafo en el que se muestran (es decir, eliminar individualmente cada línea de texto cambiando el estilo de intervalo = "display: block" a " pantalla: ninguno"). Tengo otros elementos en <p> que no quiero que se oculten, solo el intervalo.
Puedo hacerlos línea por línea, pero eso no es viable por la cantidad de líneas involucradas. ¿Hay una manera más rápida de hacer esto?
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>Puedes probar esto
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>es mas fácil
const uncheckAll = _ => { document.getElementById('#main').classList.add('hide-all'); }; .hide-all > span { display:none; }