HTML DOM टेबल deleteCaption() मेथड: टेबल कैप्शन हटाना

HTML DOM टेबल deleteCaption() मेथड HTML दस्तावेज़ में टेबल से पहला <caption> एलिमेंट हटाता है।

सिंटैक्स

object.deleteCaption()

उदाहरण: टेबल कैप्शन हटाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; }
  caption { color: #db133a; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
  .show { font-size: 1.2rem; }
</style>
<body>
  <h1>DOM टेबल deleteCaption() मेथड डेमो</h1>
  <table border="2">
    <caption>छात्र डेटा</caption>
    <tr> <th>नाम</th> <th>रोल नं.</th> </tr>
    <tr> <td>जॉन</td> <td>071717</td> </tr>
    <tr> <td>जेन</td> <td>031717</td> </tr>
  </table>
  <button onclick="remove()" class="btn">कैप्शन हटाएं</button>
  <script>
    function remove() {
      var tableCaption = document.querySelector('table').deleteCaption();
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: टेबल के ऊपर "छात्र डेटा" कैप्शन दिखता है
2. "कैप्शन हटाएं" क्लिक: कैप्शन हटा दिया जाता है
3. परिणाम: टेबल बिना कैप्शन के दिखती है

महत्वपूर्ण बिंदु

• पहला कैप्शन हटाता है: HTML में केवल एक <caption> अनुमत है
• यदि कैप्शन नहीं है: कुछ नहीं करता (कोई त्रुटि नहीं)
• वापसी मान: हटाया गया <caption> एलिमेंट (या null)
• createCaption() के विपरीत: createCaption() मौजूदा को लौटाता है, नया नहीं बनाता

कैप्शन प्रबंधन पैटर्न

// कैप्शन टॉगल करना
function toggleCaption(table, text) {
  if (table.caption) {
    table.deleteCaption();
  } else if (text) {
    table.createCaption().textContent = text;
  }
}

// कैप्शन अपडेट करना
function updateCaption(table, text) {
  var caption = table.caption || table.createCaption();
  caption.textContent = text;
}