HTML DOM Chọn phương thức remove ()

Phương thức HTML select remove () xóa một tùy chọn mới khỏi danh sách thả xuống trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

object.remove(index)

Ở đây, chỉ mục đại diện cho chỉ mục của tùy chọn sẽ bị xóa khỏi danh sách thả xuống.

Ví dụ

Hãy để chúng tôi xem một ví dụ về phương thức HTML DOM select remove () -

<!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>Hi, Select your favourite subject:</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">Remove Physics Subject</button>
<div class="show"></div>
<script>
   function addSubject() {
      var dropDown = document.querySelector(".drop-down");
      document.querySelector(".show").innerHTML="Removed Physics Subject";
      dropDown.remove(0);
   }
</script>
</body>
</html>

đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Chọn phương thức remove ()

Nhấp vào “ Xóa chủ đề Vật lý ”Để xóa môn học đầu tiên, là“ Vật lý ”ngay bây giờ trong danh sách thả xuống:

HTML DOM Chọn phương thức remove ()