Skip to content
Related Articles

Related Articles

Improve Article

p5.js Element removeClass() Method

  • Last Updated : 18 Nov, 2020
Geek Week

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :