मुझे बनाए गए कई कैनवास तत्वों को हटाने की जरूरत है। नीचे दिए गए फ़ंक्शन के साथ जब भी मैं एक बटन क्लिक करता हूं तो मैं हर बार एक को हटा सकता हूं लेकिन मुझे एक ही बार में बनाए गए सभी कैनवास को हटाना होगा। मैं यह कैसे कर सकता हूँ?

function deleteCanvas() {
  var list = document.getElementById("output");
  list.removeChild(list.childNodes[0]);
}
3
bpy 22 नवम्बर 2019, 21:40

3 जवाब

सबसे बढ़िया उत्तर

आप while का उपयोग कर सकते हैं और जब तक सूची में बाल तत्व हैं, उन्हें हटाते रहें:

function deleteCanvas() {
  var list = document.getElementById("output");
  while(list.childNodes.length) {
    list.removeChild(list.childNodes[0]);
  }
}
canvas {
 width: 10px;
 height: 10px;
 outline: solid red 1px;
}
<div id="output">
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
</div>

<button onclick="deleteCanvas()">delete all canvas elements</button>
4
Constantin Groß 22 नवम्बर 2019, 21:46

querySelectorAll, और विभिन्न getElementsBy* विधियां कई तत्वों का चयन कर सकती हैं। लौटाई गई सूची पर बस लूप करें और नेसरी के रूप में निकालें ()

उदाहरण के लिए यदि आपके पास <canvas class="game"> तत्वों का एक समूह है जिसे आप हटाना चाहते हैं तो आप क्वेरी चयनकर्ता के साथ canvas.game css चयनकर्ता का उपयोग कर सकते हैं, या उन विशिष्ट तत्वों को लक्षित करने के लिए game से getElementsByClassName पास कर सकते हैं। (अन्य कैनवास तत्वों को छोड़कर):

let list = document.querySelectorAll('canvas.game');
//or
let list = document.getElementsByClassName("game");

for(let i=0; i<list.length; i++){
  list[i].remove();
}
3
Patrick Evans 22 नवम्बर 2019, 21:46

शायद इस तरह?

let canvasses = document.getElementsByTagName("canvas");
//you can also do this with classes.

while (canvasses.length > 0) {
    for (let i =0; i < canvasses.length; i++) {
        canvasses[i].remove();
    }
}
1
Laurent Dhont 22 नवम्बर 2019, 21:51