[JavaScript] 기능무효화와 th:data-uri, this.dataset.uri

기능 무효화

---

javascript:void(0);

[~.html]

<a href="javascript:void(0);" th:data-uri="@{|article/delete/${article.id}|}"
   class="delete"
   th:if="${article.author != null and #authentication.getPrincipal().getUsername() == article.author.username}"
   th:text="삭제"
>
</a>

<script layout:fragment="script" type="text/javascript">
  const delete_elements = document.getElementsByClassName("delete");
  Array.from(delete_elements).forEach(function(element) {
    element.addEventListener('click', function() {
      if(confirm("정말로 삭제하시겠습니까?")) {
          location.href = this.dataset.uri;
      };  
      });
  });
</script>  

javascript:void(0); 으로 a태그의 '기능을 무효화' 시키고
getElementsByClassName을 이용하여 해당 element을 찾은 다음,
addEventListener를 이용하여 클릭했을 시, 알림창(confirm)이 뜨게한 다음,
location.href의 값으로 this.dataset.uri를 넣어주어
th:data-uri로 넣어주었던 값을 불러들인다.

[layout.html]

<th:block layout:fragment="script"></th:block>