How to fix "data("url") is undefined" issue in Jquery?

Question

data("url") return undefined

$(document).ready(() => {
    $(".removeBtn").click((e) => {

        var $data_url = $(this).data("url");

        console.log($data_url); //It return undefined

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                window.location.href = $data_url;
            }
        })
    })
})

<button data-url="<?php echo base_url("product/deleteProduct/$product->id"); ?>" class="btn btn-outline btn-danger removeBtn">Remove</button>

Answer 1

Apparently this does not reference the element you think it does.

(This is due to the arrow function, which doesn't scope this)

Instead you should use e.target here to get the clicked element

$(document).ready(() =>{ $(".removeBtn").click((e) =>{

    var $data_url = $(e.target).data("url");

    console.log($data_url); //It return undefined

})

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-url="something" class="btn btn-outline btn-danger removeBtn">Remove</button>

NOTE: the value of data-url is "something", so this snippet will just print the value e.g. "something" to the console