diff --git a/src/main/resources/static/js/card/card-list-delete.js b/src/main/resources/static/js/card/card-list-delete.js
index a7db719..73a7f46 100644
--- a/src/main/resources/static/js/card/card-list-delete.js
+++ b/src/main/resources/static/js/card/card-list-delete.js
@@ -1,4 +1,6 @@
-function deleteCardFromGroup(button) {
+function deleteCardFromGroup(button, event) {
+    event.stopPropagation();
+
     const cardId = button.getAttribute('card-id');
     const groupId = getCurrentGroupId();
 
diff --git a/src/main/resources/static/js/card/card.js b/src/main/resources/static/js/card/card.js
index 24eb88a..6f9ab3d 100644
--- a/src/main/resources/static/js/card/card.js
+++ b/src/main/resources/static/js/card/card.js
@@ -9,6 +9,7 @@ function populateCardSection(data, container) {
         cardElement.id = `card-${data.id}`;
 
         cardElement.innerHTML = `
+            <button class="delete-button" th:attr="card-id=${data.id}" onclick="deleteCardFromGroup(this, event)">삭제</button>
             <div class="card-image">
                 <img src="${data.profileImg}" alt="Person profile">
             </div>
diff --git a/src/main/resources/templates/card-list.html b/src/main/resources/templates/card-list.html
index 8f3737d..54552d1 100644
--- a/src/main/resources/templates/card-list.html
+++ b/src/main/resources/templates/card-list.html
@@ -25,9 +25,7 @@ <h2 class="title">[[${group.name}]]</h2>
     <div class="card-list">
         <!-- 카드 목록을 동적으로 생성 -->
         <div th:each="card : ${cards}">
-            <div th:replace="card :: cardSection(${card.id})">
-                <button class="delete-button" th:attr="card-id=${card.id}" onclick="deleteCardFromGroup(this)">삭제</button>
-            </div>
+            <div th:replace="card :: cardSection(${card.id})"></div>
         </div>
     </div>
 </div>