Css sınıfları web safalarının düzgün görünmesi için önemlidir. Fakat bazı durumlarda sınıfların silinmesi gerekebilir. Mesela bir mesaj uyarı için kullanılacaksa dikkat adında bir class oluşturularak o mesajı saklayan elemente eklenir. Ya sonra bu mesajın içeriği değişirse ne yapacağız?
JS Element Class Silme İşlemi
Bir elemente atanmış tüm sınıflar classList özelliği içerisinde tutulurlar. Bu özellik üzerinden kaldırdığımız sınıflar artık o elemente uygulanmazlar.
classList bir array değişkendir ve içerisinde o elemente uygulanan tüm class adlarını içerir. Bir sınıfı silmek için remove metodunu kullanabiliriz. Bu metod parametre olarak ayrı ayrı silinecek tüm class isimlerini alır. Kullanım şekli aşağıdaki gibidir.
element.classList.remove(sinifBir, sinifIki, ... , sinifN);Şimdi birkaç örnek verelim.
const kutuDOM = document.getElementById("kutu");
kutuDOM.classList.remove("cerceve");
const aciklamaDOM = document.getElementById("aciklama");
aciklamaDOM.classList.remove("yazi-fontu");
const baslikDOM = document.getElementById("baslik");
baslikDOM.classList.remove("yazi-rengi", "cerceve", "saga-hizala");Biz örneklerimizide sadece getElementById metodunu kullanarak bir elemente ulaşdık. Fakat isterseniz getElementsByTagName gibi diğer yöntemleri de seçebilirsiniz.
Silmek istediğiniz sınıfları virgül ile ayırarak remove metoduna parametre olarak vermek gereklidir.
Bir Elementin Tüm Css Sınıflarını Javascript İle Silme
Eğer bir elemente uygulanan tüm sınıfları tek seferde silmek gerekirse, bir kaç yöntem uygulanabilir. Bu yöntemlerin tamamı classList özelliğinin değerini sıfırlama veya bu özelliği kaldırma üzerine çalışır.
Bu yöntemlerden bir tanesi
element.classList = [];
element.classList = "";
element.className = "";şeklinde bu özelliği sıfırlamaktır. Bu şekilde tüm Css sınıfları silinecektir.
Sonuç
Eğer bir elemana uygulanan bir Css sınıfını silinmek istenirse element.classList.remove metodu kullanılabilir.
Javascript kullanarak Css ile ilgili yaptığınız farklı işlemleri bize yorumlardan paylaşabilirsiniz.