The removeClass() method of p5.Element in p5.js is used to remove the specified class to an element. An element can have multiple classes assigned to it. Also, one class can be specified to multiple elements on the page.
Syntax:
removeClass(class)
Parameters: This function accepts a single parameter as mentioned above and described below.
- class: It is a string that denotes the class to be removed.
Example: The example below illustrates the removeClass() method in p5.js
Javascript
function setup() { createCanvas(600, 300); textSize(18); text("Click on the buttons to add, remove " + "or show the classes of the elements", 20, 20); setBtn = createButton("Add given class to element"); setBtn.position(30, 40); setBtn.mouseClicked(addClass); removeBtn = createButton("Remove given class from element"); removeBtn.position(30, 70); removeBtn.mouseClicked(removeClass); showBtn = createButton("Show current classes"); showBtn.position(30, 100); showBtn.mouseClicked(showClasses); class_name = createInput('class1'); class_name.position(30, 140); // Create a new p5.Element tmpElement = createElement("div"); } function addClass() { clear(); // Get the class to set let classToSet = class_name.value(); // Set the class of the element tmpElement.addClass(classToSet); text("Class added with name: " + classToSet, 20, 200); text("Click on the buttons to add, remove or " + "show the classes of the elements", 20, 20); } function removeClass() { clear(); // Get the class to remove let classToRemove = class_name.value(); // Remove the class of the element tmpElement.removeClass(classToRemove); text("Class removed with name: " + classToRemove, 20, 200); text("Click on the buttons to add, remove or " + "show the classes of the elements", 20, 20); } function showClasses() { clear(); // Get the classes of the element let setClasses = tmpElement.class(); // Display the classes if (setClasses != '') text("The classes of the element are: " + setClasses, 20, 180); else text("The element has no classes", 20, 180); text("Click on the buttons to add, remove or " + "show the classes of the elements", 20, 20); } |
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Element/removeClass
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
