How to get the elements of one array which are not present in another array using JavaScript?

<h1 id="h1" style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<button onclick="gfg_Run()">
    Click here
</button>
<p id="GFG_DOWN"></p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var ar1 = [1, 2, 3, 4];
    var ar2 = [2, 4];
    el_up.innerHTML =
    "Click on the button to remove the element of "+
    "second from the first array.<br><br> firstArray - " +
    ar1 + "<br>secondArray - " + ar2;
    
    function gfg_Run() {
        var elmts = ar1.filter(
            function(i) {
                return this.indexOf(i) < 0;
            },
            ar2
        );
        el_down.innerHTML = elmts;
    }
</script>

<h1 id="h1" style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<button onclick="gfg_Run()">
    Click here
</button>
<p id="GFG_DOWN"></p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var ar1 = [1, 2, 3, 4];
    var ar2 = [2, 4];
    el_up.innerHTML =
    "Click on the button to remove the element of second"+
    " from the first array.<br><br> firstArray - "
    + ar1 + "<br>secondArray - " + ar2;
    
    function gfg_Run() {
        var elmts = ar1.filter(f => !ar2.includes(f));
        el_down.innerHTML = elmts;
    }
</script>