Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript में DOM नोड के सभी चाइल्ड एलिमेंट्स हटाना


चाइल्ड एलिमेंट्स हटाने के लिए, innerHTML को '' पर सेट करें।

उदाहरण

कोड निम्न है:

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> <div id='removeAllChildElements' style="height: 200px; width: 200px; border: 1px solid red;"> <span>Javascript</span> <div>MySQL</div> </div> <button id='remove'>Remove the items</button> </body> <script>    remove.onclick = () => {       const element = document.getElementById("removeAllChildElements");       element.innerHTML = '';    } </script> </html>

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html(index.html) सहेजें। फ़ाइल पर राइट-क्लिक करें और VS कोड एडिटर में "Open with live server" विकल्प चुनें।

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript में DOM नोड के सभी चाइल्ड एलिमेंट्स हटाना

अब आप "Remove the items" बटन पर क्लिक कर सकते हैं। यह बॉक्स के अंदर सभी एलिमेंट्स को हटा देगा।

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript में DOM नोड के सभी चाइल्ड एलिमेंट्स हटाना


  1. JavaScript में चाइल्ड नोड काउंट कैसे प्राप्त करें? JavaScript में चाइल्ड नोड काउंट कैसे प्राप्त करें?

    उदाहरण children.length प्रॉपर्टी से चाइल्ड नोड्स की संख्या गिनें। <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document</title> </head> <body> <lab

  1. JavaScript में ID द्वारा एलिमेंट हटाना JavaScript में ID द्वारा एलिमेंट हटाना

    ID द्वारा एलिमेंट हटाने के लिए, आप remove() का उपयोग कर सकते हैं।उदाहरणकोड निम्न है:<!DOCTYPE html> <html lang=en> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, initial-scale=1.0>    <title>Document

  1. HTML DOM Select remove() Method - विकल्प हटाएं HTML DOM Select remove() Method - विकल्प हटाएं

    HTML DOM Select remove() Method HTML DOM select remove() method ड्रॉप-डाउन सूची से निर्दिष्ट इंडेक्स पर स्थित विकल्प को हटाता है। यह डायनामिकली विकल्पों को हटाने के लिए उपयोगी है। Syntax selectObject.remove(index) यहां index उस विकल्प का इंडेक्स है जिसे ड्रॉप-डाउन सूची से हटाया जाना है। उदाहरण ड्र