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

HTML DOM Select remove() Method

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

Syntax

selectObject.remove(index)

यहां index उस विकल्प का इंडेक्स है जिसे ड्रॉप-डाउन सूची से हटाया जाना है।

उदाहरण

ड्रॉप-डाउन से पहला विकल्प (Physics) हटाना:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: radial-gradient(circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90%) no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.1rem; }
  .drop-down {
    display: block;
    width: 35%;
    border: 2px solid #fff;
    font-weight: bold;
    padding: 2px;
    margin: 1rem auto;
    outline: none;
  }
  .btn {
    background: orange;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    font-weight: bold;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM Select remove() method Demo</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down' name="Drop Down List">
  <option>Physics</option>
  <option>Biology</option>
  <option>Maths</option>
</select>
<button type="button" onclick="addSubject()" class="btn">Physics विषय हटाएं</button>
<div class="show"></div>
<script>
  function addSubject() {
    var dropDown = document.querySelector(".drop-down");
    document.querySelector(".show").innerHTML = "Physics विषय हटाया गया";
    dropDown.remove(0);
  }
</script>
</body>
</html>

आउटपुट

"Physics विषय हटाएं" बटन पर क्लिक करने पर पहला विकल्प "Physics" ड्रॉप-डाउन सूची से हटा दिया जाता है। अब सूची में "Biology" और "Maths" बचते हैं।

मुख्य बिंदु

• remove(index) निर्दिष्ट इंडेक्स पर विकल्प को स्थायी रूप से हटा देता है
• इंडेक्स 0-आधारित है (पहला विकल्प = 0)
• यदि इंडेक्स सीमा से बाहर है, तो कोई त्रुटि नहीं होती - कुछ नहीं होता
• add() method के साथ संयोजन में उपयोग करके विकल्पों को डायनामिकली प्रबंधित करें
• हटाए गए विकल्प को पुनर्प्राप्त नहीं किया जा सकता - आवश्यकता हो तो पहले स्टोर कर लें