it’s my first time posting here. I’m currently immersed in a group project and dipping my toes into AJAX and Javalin for the first time. However, we’re having trouble to figure out how to remove an item that a user has searched for using our search bar. Our objective is to eliminate the item from our Java ArrayList and subsequently remove the corresponding list element (li element) from the displayed list of searched items below. We aim to achieve this seamlessly with just a click on the delete icon, without the need for a page reload.

— Additional Information —
Display: We’ll be utilizing Javalin for the presentation, where we’ll format HTML into Java strings.

Preferably utilize AJAX.

Currently I have coded only the part where it would remove the list using ajax which WORKS

Code No.1 (AJAX)

                $(document).on("click",".trashIcon",function()    {
                    $(this).closest('li').remove();
                })

I tried implementing things such as mentioning a function inside the java and call that function while the page is posting, (Generated by ChatGPT)

Code No.2 (Javalin/Java)
app.post("/removeCountry", Page2TA::removeCountry());

However this wasn’t functioning due to removeCountry() being undefined

Code No.3(AJAX code):

<script>
        $(document).ready(function() {
            // Event listener for delete icon click
            $(document).on('click', '.delete-icon', function() {
                const countryToRemove = $(this).data('country');
                const $li = $(this).closest('li');
                $.ajax({
                    type: 'POST',
                    url: '/removeCountry',
                    data: { country: countryToRemove },
                    success: function(response) {
                        $li.remove();
                    }
                });
            });
        })
</script>

Code No.4(Java function):

 public static void removeCountry(Context context, ArrayList<String> CountryOutput)   {
    String country = context.formParam("myCountry");
    CountryOutput.remove(country);
  }

Is there any other anyway i could change the code in “Code No.3” and implement it inside Code No.1?