HTML - DOMTokenList remove() Method

Quiz

HTML DOMTokenList remove() method is used to remove one or more tokens specified in parameter to the DOMTokenList.

Syntax

domtokenlist.remove(token);

Parameter

This method accepts a single parameter as listed below.

Parameter	Description
token	It represents name of the token which you want to remove from DOMTokenList.

Return Value

It does not return any value.

Examples of HTML DOMTokenList 'remove()' Method

The following examples illustrates implementation of DOMTokenList remove() method.

Removing a Class from Element

The following example illustrates remove a class to any element using remove() method. The removed class removes the background and text color of the element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOMTokenList remove() Method</title>
    <style>
        .color {
            background-color: #04af2f;
            color: white;
        }
        .font {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Add</button>
    <button onclick="remove()">Remove</button>
    <p>Hii..</p>
    <p id="remove">Welcome to Tutorials Point...</p>
    <script>
        function fun() {
            let x = document.getElementById("remove").classList;
            x.add("color", "font");

        }
        function remove() {
            let x = document.getElementById("remove").classList;
            x.remove("color");
        }
    </script>
</body>
</html>

Removing Multiple Classes from Element

In the following example, we have removed multiple classes from paragraph element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOMTokenList remove() Method</title>
    <style>
        .color {
            background-color: #04af2f;
            color: white;
        }
        .font {
            font-size: 40px;
        }
        .align {
            text-align: center;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Add</button>
    <button onclick="remove()">Remove</button>
    <p>Hii..</p>
    <p id="remove">Welcome to Tutorials Point...</p>
    <script>
        function fun() {
            let x = document.getElementById("remove").classList;
            x.add("color", "font", "align");
        }
        function remove() {
            let x = document.getElementById("remove").classList;
            x.remove("color", "font");
        }
    </script>
</body>
</html>

Removing class using Conditional Statement

In the following example we have used conditional statement to remove class='align' if element has class='font'.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOMTokenList remove() Method</title>
    <style>
        .color {
            background-color: #04af2f;
            color: white;
        }
        .font {
            font-size: 40px;
        }
        .align {
            text-align: center;
        }
    </style>
</head>
<body>
    <button onclick="remove()">Remove</button>
    <p>Hii..</p>
    <p id="remove">Welcome to Tutorials Point...</p>
    <script>
        function remove() {
            let x = document.getElementById("remove").classList;
            x.add("color", "font", "align");
            if (x.contains("font")) {
                x.remove("align");
            }
        }
    </script>
</body>
</html>

Supported Browsers

Method
remove()	Yes 8	Yes 12	Yes 3.6	Yes 5.1	Yes 12.1

html_dom.htm

Print Page