The difference between display="none" and "classList.remove" methods

In JavaScript, both the "display" attribute and the "classList.remove" method can be used to show or hide elements, but there are some differences between them.

"display" attribute:
- Use the "display" attribute to directly control the display and hiding of the element, by setting it to "none" to hide the element, or setting it to other appropriate values (such as "block", "inline", etc.) to display the element.
- By modifying the "style.display" attribute of the element, the element can be displayed and hidden.
- For example, hide an element with the following code:
```
element.style.display = "none";
```
- To display an element, you can set the "display" attribute to the appropriate value:
```
element.style.display = "block";
```
“classList.remove” method:
- The "classList.remove" method is used to remove a class name from the element's class name list.
- CSS styles can be applied to show or hide elements by adding or removing specific class names.
- For example, you can define a CSS class called "hidden" that contains styles that hide elements:
```
.hidden {
        
        
  display: none;
}
```
- To hide an element, you can use the "classList.remove" method to remove the "hidden" class:
```
element.classList.remove("hidden");
```
- To display an element, you can add the "hidden" class using the "classList.add" method:
```
element.classList.add("hidden");
```

Summarize:

Use the "display" property to directly control the display and hiding of elements, and use the "classList.remove" method to add or remove specific class names to apply CSS styles to realize the display and hiding of elements.
If you only need to control the display and hiding of elements in JavaScript and do not involve specific CSS styles, you can use the "display" attribute.
If you need to use CSS styles to show or hide elements, and want to control by adding or removing class names, you can use the "classList.remove" method.
Using the "display" attribute is more direct and flexible, while using the "classList.remove" method is more suitable for applying complex CSS styles.

The essential difference between these two methods lies in the objects they operate and the mechanisms they implement.

"display" attribute:
- The "display" property is a CSS property used to control the display and hiding of elements. It is a style attribute applied to DOM elements.
- By modifying the "style.display" attribute of the element, you can directly change the display state of the element on the page.
- Modifying the "display" attribute will trigger a re-rendering by the browser, thus updating the element's display state.
“classList.remove” method:
- "classList" is an attribute of the DOM element. It is a read-only attribute that returns a list of class names of the element.
- The "classList" object provides a set of methods, such as "add", "remove" and "toggle", for manipulating the class names of elements.
- A specified class name can be removed from an element's list of class names by using the "classList.remove" method.
- By adding or removing specific class names, you can apply or remove corresponding CSS styles to control the display state of elements.

Essentially, the "display" attribute directly controls the display and hiding of elements, while the "classList.remove" method realizes display and hiding by manipulating the class name list of the element, thereby affecting the style of the element.

It should be noted that the "display" attribute modifies the CSS style of the element, while the "classList.remove" method modifies the element's class name list. Therefore, if there are other style rules based on class names or interaction effects through class names, using the "classList.remove" method can better integrate with existing styling and interaction logic. If you simply control the display and hiding of elements, the "display" attribute may be more direct and convenient.