DOM HELPER CLASS

In this class, we will have a helper class that will allow us to do the following: clear event listener from an element. move an element to another location ..etc

class DOMHelper {

	static clearEventListener(element) {

		const clonedElement = element.cloneNode(true);

		element.replaceWith(clonedElement);

		return clonedElement;

	}



	static moveElement(elementId, newDestinationSelector) {

		const element = document.getElementById(elementId);

		const destinationElement = document.querySelector(newDestinationSelector);



		destinationElement.append(element);

	}

}

1. Move a DOM element :
   

   static moveElement(elementId, newDestinationSelector) {
   
   	const element = document.getElementById(elementId); //Get old element
   
   	const destinationElement = document.querySelector(newDestinationSelector); //Get destination element
   
   
   
   	destinationElement.append(element);
   
   }​

   
   


2. Clear attached Event listener: the idea is to re-assign the same element to itself one more time, So we will have a clone , assign it back to the same element using replaceWith method
   

   static clearEventListener(element) {
   
   	const clonedElement = element.cloneNode(true); //Clone the element
   
   	element.replaceWith(clonedElement); //Replace itself with the cloned one
   
   	return clonedElement;
   
   }​

   
   


3. -

Mohammed Anwar

Experienced technical lead PHP, MySQL and Laravel Developer for 15+ years, with proven ability to develop and create high-quality and optimized web applications. Great ability to build and optimize database design, schema and queries. Versed programing trainer and instructor delivering web courses and helping others to get into the field in a timely manner. Fast and eager learner for new technologies .