How can i get id or value from dropify input on clicking the remove button if there is a default value?

<input type="file" name="galleryImages{{ $key }}\[\]"
value="1"
data-default-file="{{ asset('storage/services/' . $service-\>slug . '/gallery/' . $key . '/' . $imageItem) }}"
class="dropify" data-id="{{ $key }}"
\>

For each input field, I want to get back the value of that clicked input.

   $(document).ready(function() {
        $('.dropify').dropify(); //initializing dropify

        //Handling click event on Remove button of dropify
        $('.dropify-clear').click(function(e) {
            e.preventDefault();
            console.log(e.target.value);
            alert('Remove Hit', ); //Here you can manage you ajax request to delete
            //file from database.
        });
    });

To get the ID or value of the Dropify input on clicking the remove button (dropify-clear button), you can use the following code:

$('.dropify-clear').click(function(e) {
      e.preventDefault();

      // Getting the default value of the clicked input
      var defaultValue = $(this).siblings('input[type="file"]').attr('data-default-file');
      console.log(defaultValue);

      // Getting the value of the clicked input
      var inputValue = $(this).siblings('input[type="file"]').val();
      console.log(inputValue);

      // Getting the ID (data-id) of the clicked input
      var inputId = $(this).siblings('input[type="file"]').attr('data-id');
      console.log(inputId);

      alert('Remove Hit'); // Here you can manage your code to perform anything what you want
  });

In the code above, $(this) refers to the clicked remove button. we can find the corresponding Dropify input element and retrieve its default value using .attr('data-default-file'). Similarly, the ID of the input element can be obtained using .attr('data-id').

Please note that we cann't get the default value of the dropify input by .val() function because the default value is placed in the attribute (data-default-file)