title: Spring boot delete database entry after clicking button
body: <p>I work with a Spring boot and JSP project and the UI is provided below, </p>
  
  <p><a href="https://i.stack.imgur.com/3atCv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3atCv.png" alt="enter image description here"></a></p>
  
  <p>I would like to delete the row entries using the delete button. The page <code>list.jsp</code>loads with the controller method, </p>
  
  <pre><code>@GetMapping(value = "/")
  public String index() {
      return "redirect:/users";
  }
  
  @GetMapping(value = "/users")
  public String showAllUsers(Model model) {
  
      model.addAttribute("users", userService.findAll());
      return "list";
  }
  </code></pre>
  
  <p>The JSP part for the buttons are in the <code>list.jsp</code> page, </p>
  
  <pre><code>&lt;td&gt;
                      &lt;spring:url value="/users/${user.id}" var="userUrl"/&gt;
                      &lt;button class="btn btn-info" onclick="location.href='${userUrl}'"&gt;Query&lt;/button&gt;
  
                      &lt;spring:url value="/users/${user.id}/delete" var="deleteUrl"/&gt;
  
            &lt;button class="btn btn-danger" onclick="this.disabled=true;removeUser()"&gt;Delete&lt;/button&gt;
  
                      &lt;spring:url value="/users/${user.id}/update" var="userUpdate"/&gt;
                      &lt;button class="btn btn-info" onclick="location.href='${userUpdate}'"&gt;Update&lt;/button&gt;
                  &lt;/td&gt;
  </code></pre>
  
  <p>The controller mapping for the deletion, </p>
  
  <pre><code>@DeleteMapping(value = "/users/{id}/delete")
      public String deleteUser(@PathVariable("id") Long idx, final RedirectAttributes redirectAttributes) {
  
          logger.debug("Delete user with Id {}", idx);
  
          redirectAttributes.addFlashAttribute("css", "Success");
          redirectAttributes.addFlashAttribute("msg", "The user is deleted");
  
          // delete the user
          userService.delete(idx);
          return "redirect:/users/";
      }
  </code></pre>
  
  <p>I have the JavaScript function in the custom file, </p>
  
  <pre><code>function removeUser(){
  
  }
  </code></pre>
  
  <p>and, after clicking the delete button, I can get some console output, which means the delete button is working. How should I implement the <code>removeUser</code> function that will delete the rows after clicking the button? </p>
  
  <p>I would like to know if I can do this with any built-in methods from the <code>jQuery</code> as well. Thanks.</p>
  
  <p>The <code>Query</code> and the <code>Update</code> buttons have respective controller methods and work properly. </p>
  
  <p>If I leave it just like </p>
  
  <pre><code>&lt;spring:url value="/users/${user.id}/delete" var="deleteUrl"/&gt;
  </code></pre>
  
  <p>it doesnt delete the row or do anythong </p>
  
  <p><code>Update</code></p>
  
  <p>I can pass the delete URL to the custom JavaScript function,</p>
  
  <pre><code>&lt;spring:url value="/users/${user.id}/delete" var="deleteUrl"/&gt;
                      &lt;button class="btn btn-danger" onclick="this.disabled=true;removeUser('${deleteUrl}')"&gt;Delete&lt;/button&gt;
  </code></pre>
  
  <p>The <code>removeUser</code> fucntion provided, </p>
  
  <pre><code>function removeUser(deleteURL) {
  
      console.log("Remove : " + deleteURL);
  
      $.ajax({
  
          type: "DELETE",
          url: deleteURL,
  
          success: function () {
  
          },
  
          failure: function (errMsg) {
              console.log(errMsg.toString())
          }
      });
  }
  </code></pre>
  
  <p>I have tried to write the success function, not working though </p>