การลบคลาสออกจากอิลีเมนต์ HTML ทำได้ง่ายด้วยเมธอด remove() ของพร็อพเพอร์ตี้ classList ใน JavaScript หากคุณเคยอ่านวิธีเพิ่มคลาสให้อิลีเมนต์ คุณจะเห็นว่าการลบคลาสทำได้ในลักษณะเดียวกัน แค่ย้อนกลับกัน
มาดูสูตร classList.remove() แบบทั่วไปก่อน — แล้วตามด้วยตัวอย่างปฏิบัติ
สูตร
var element = document.querySelector("selector") element.classList.remove("class")ในตัวอย่างทั่วไปด้านบน เราค้นหา อิลีเมนต์ HTML แรก บนหน้าที่มี ชื่อตัวเลือก (selector) ที่ระบุ (อาจเป็นตัวเลือกอิลีเมนต์, คลาส, ฯลฯ) และเก็บอ้างอิงไว้ในตัวแปร
จากนั้นเราแนบเมธอด remove() ของ พร็อพเพอร์ตี้ classList เข้ากับอ็อบเจ็กต์อิลีเมนต์ (ตัวแปร) และระบุคลาสที่ต้องการลบออก
ตัวอย่าง classList.remove() แบบปฏิบัติ
เพื่อค้นหาและลบคลาส เราจำเป็นต้องมีอิลีเมนต์ที่มีคลาสอยู่แล้ว
เราควรลบคลาสอะไรดี?
เพื่อความสะดวก ผมเพิ่มคลาสชื่อ italic ให้กับย่อหน้าที่คุณกำลังอ่านอยู่ ซึ่งทำให้ข้อความเอียง
มาลอง "ยกเลิกการเอียง" ย่อหน้าด้านบนด้วยเทคนิค classList.remove ที่เพิ่งเรียนรู้:
var firstParagraph = document.querySelector(".italic") firstParagraph.classList.remove("italic")ผลลัพธ์:
หมายเหตุ: ผมมีคลาส italic ในไฟล์ CSS ของเว็บไซต์ นั่นคือเหตุผลที่มันทำงาน คลาสนั้นเป็นแบบนี้:
.italic { font-style: italic; }แหล่งข้อมูล
- MDN Web Docs element.classList
