javascript display:none 對於指定段落中的每個組件

Question

我有一個顯示超過 10,000 行文本的段落，並希望 onclick 將所有文本從顯示中刪除而不隱藏它們所顯示的段落（即通過將 span style="display:block" 更改為“單獨刪除每一行文本”顯示：無”）。 我在 中有其他我不想隱藏的元素，只有跨度。

我可以一行一行地做，但這對於所涉及的行數來說是不可行的。 有沒有更快的方法來做到這一點？

 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>

Answer 1

你可以試試這個

 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>

Answer 2

它更容易

 const uncheckAll = _ => { document.getElementById('#main').classList.add('hide-all'); };

 .hide-all > span { display:none; }

javascript display:none 對於<span>指定段落中的</span>每個<span>組件</span>

問題描述

2 個解決方案

解決方案1
2 已采納 2021-11-16 14:29:18

解決方案2
0 2021-11-16 15:18:11

javascript display:none 對於<span>指定段落中的</span>每個<span>組件</span>

問題描述

2 個解決方案

解決方案1 2 已采納 2021-11-16 14:29:18

解決方案2 0 2021-11-16 15:18:11

解決方案1
2 已采納 2021-11-16 14:29:18

解決方案2
0 2021-11-16 15:18:11