jQuery를 사용하여 부모 요소를 삭제하는 방법

jQuery를 사용하여 부모 요소를 삭제하는 방법

---

내 jsp에 목록 항목 태그가 있습니다. 각 목록 항목에는 delete라는 링크 ( "a"태그)를 포함하여 내부에 몇 가지 요소가 있습니다. 내가 원하는 것은 링크를 클릭 할 때 전체 목록 항목을 삭제하는 것입니다.

내 코드의 구조는 다음과 같습니다.

$("a").click(function(event) {
  event.preventDefault();
  $(this).parent('.li').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="191" class="li">
  <div class="text">Some text</div>
  <h4><a href="URL">Text</a></h4>
  <div class="details">
    <img src="URL_image.jpg">
    <span class="author">Some info</span>
    <div class="info"> Text
      <div class="msg-modification" display="inline" align="right">
        <a name="delete" id="191" href="#">Delete</a>
      </div>
    </div>
  </div>
</li>

그러나 이것은 작동하지 않습니다. 저는 jQuery를 처음 사용하므로 다음과 같은 몇 가지를 시도했습니다.

$(this).remove();

이것은 작동하며 클릭하면 링크를 삭제합니다.

$("#221").remove();

이것은 작동하지만 표시된 목록 항목을 삭제하지만 "동적"이 아닙니다.

누군가 나에게 팁을 줄 수 있습니까?

---

.closest()방법을 사용하기 만하면 $(this).closest('.li').remove();
됩니다. 현재 요소로 시작한 다음 일치하는 요소를 찾기 위해 체인 위로 올라가서 하나를 찾으면 바로 중지합니다.

.parent()요소 의 직접 상위 요소 에만 액세스합니다 . 즉, div.msg-modification일치하지 않는 요소 .li입니다. 따라서 원하는 요소에 도달하지 않습니다.

.closest()(현재 요소를 .parents()확인한 다음 체인 위로 올라가는) 이외의 다른 솔루션 은 사용할 것입니다. 그러나 일치하는 요소를 찾는 즉시 중지되지 않는다는 경고가 있습니다 (현재 요소를 확인하지 않음). 그러나 부모 요소 만 ). 귀하의 경우에는 실제로 중요하지 않지만 수행하려는 작업 .closest()이 가장 적절한 방법입니다.

---

또 다른 중요한 사항 :

둘 이상의 요소에 동일한 ID를 사용하지 마십시오 . 허용되지 않으며 디버그하기 매우 어려운 문제가 발생합니다. id="191"링크에서를 제거하고 클릭 처리기에서 ID에 액세스해야하는 경우 $(this).closest('.li').attr('id'). 실제로 사용 data-id="123"하고 액세스하는 .data('id')대신에 더 깨끗할 것입니다 .attr('id')(따라서 요소 ID는 (데이터베이스?) 행에있는 ID와 유사 할 필요가 없습니다).

---

unwrap () 사용은 어떻 습니까?

<div class="parent">
<p class="child">
</p>
</div>

사용 후 $(".child").unwrap()--그것은 될 것입니다;

<p class="child">
</p>

---

parents()대신 사용 parent():

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});

---

부모 삭제 :

$(document).on("click", ".remove", function() {
       $(this).parent().remove(); 
});

모든 부모 삭제 :

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});

---

$('#' + catId).parent().remove('.subcatBtns');

---

이것을 사용할 수도 있습니다.

$(this)[0].parentNode.remove();

참고 URL : https://stackoverflow.com/questions/6647736/how-to-delete-parent-element-using-jquery