Complete Guide to Removing HTML Elements with JavaScript: From Basic Methods to Modern Practices

Problem Background and Phenomenon Analysis

In web development, dynamically removing HTML elements is a common requirement. Beginners often encounter a typical issue when using JavaScript for DOM manipulation: elements briefly disappear and immediately reappear after clicking a button. The root cause of this phenomenon lies in the default submission behavior of forms.

In the original code, a <input type="submit"> button was used. When users click it, the browser executes the following steps:

1. Triggers the onclick event, executing the removeDummy() function
2. The function successfully removes the <div> element with ID "dummy"
3. The browser continues with the form's default submission behavior
4. The page reloads, restoring the original HTML structure

Solution One: Preventing Form Submission

The most direct solution is to modify the event handling approach to prevent the form's default submission behavior. This can be achieved through two methods:

Method A: Using onsubmit Event

Move event handling from the button's onclick to the form's onsubmit, and return false in the handler function:

<form onsubmit="return removeDummy();">
    <input type="submit" value="Remove DUMMY"/>
</form>

<script>
function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
</script>

Method B: Using Regular Button

If the form's sole purpose is to remove elements, avoid using forms altogether and use a regular button instead:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

<script>
function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
}
</script>

Modern Event Handling Practices

While onXYZ attributes work in simple scenarios, modern web development recommends using more standardized event listening approaches that provide better code organization and browser compatibility.

Standard Event Listener Implementation

<input id="btnRemoveDummy" type="button" value="Remove DUMMY"/>

<script>
function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
}

function pageInit() {
    var btn = document.getElementById('btnRemoveDummy');
    
    if (btn.addEventListener) {
        // DOM2 standard, supported by modern browsers
        btn.addEventListener('click', removeDummy, false);
    } else if (btn.attachEvent) {
        // IE8 and earlier versions
        btn.attachEvent('onclick', removeDummy);
    } else {
        // DOM0 approach, best compatibility
        btn.onclick = removeDummy;
    }
}

// Call initialization function at page bottom
pageInit();
</script>

Page Initialization Timing

The timing of event listener setup is crucial. It's recommended to execute immediately after DOM loading completes, rather than waiting for all resources to load:

<!-- Call before body ends -->
<script>
pageInit();
</script>
</body>

Modern remove() Method

With the evolution of web standards, modern browsers provide a more concise remove() method. This method has been widely supported across major browsers since July 2015.

Basic Usage of remove() Method

// Traditional approach
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);

// Modern approach
var elem = document.getElementById('dummy');
elem.remove();

Characteristics of remove() Method

• Concise Syntax: No need to access parent node, directly call the element's own remove() method
• No Return Value: Returns undefined after execution
• Safe Operation: If the element has no parent node, calling remove() has no effect
• Scope Limitations: The remove() method cannot be used within with statements

Complete Example

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<div id="div-03">Here is div-03</div>

<script>
const element = document.getElementById("div-02");
element.remove(); // Removes the div with ID 'div-02'
</script>

Browser Compatibility Considerations

In practical projects, compatibility across different browsers must be considered:

Advantages of Traditional Methods

• parentNode.removeChild() has perfect support across all browsers
• Stable and reliable code with no compatibility issues
• Suitable for projects requiring support for older browsers

Choosing Modern Methods

• remove() method offers better performance in modern browsers
• More concise and readable code
• Recommended if the project doesn't need to support older browsers like IE

Best Practices Summary

1. Avoid Form Default Behavior: Use regular buttons or prevent form submission in scenarios requiring page refresh prevention
2. Adopt Modern Event Listening: Use addEventListener instead of onXYZ attributes for better code maintainability
3. Consider Browser Compatibility: Choose appropriate DOM manipulation methods based on target user base
4. Code Organization: Centralize event binding logic for easier maintenance and debugging
5. Progressive Enhancement: Provide fallback solutions for browsers that don't support modern methods

By understanding these core concepts and practical methods, developers can handle DOM operations more proficiently and build more stable and efficient web applications.