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();

이렇게 하면 표시된 목록 항목이 삭제되지만 "동적"은 아닙니다.

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

방법을 사용하기만 하면 됩니다.$(this).closest('.li').remove();
현재 요소에서 시작하여 일치하는 요소를 찾는 체인을 타고 올라가 일치하는 요소를 발견하면 바로 멈춥니다.

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

이외에도 (현재 요소를 확인한 다음 체인을 오르는) 다른 솔루션을 사용할 수 있습니다. 그러나 일치하는 요소를 발견하면 즉시 중지되지 않으며(현재 요소를 확인하지 않고 상위 요소만 확인함) 주의해야 합니다.당신의 경우에는 중요하지 않지만 당신이 하려는 일에 대해서는 중요합니다..closest()가장 적합한 방법입니다.

---

또 다른 중요한 것:

두 개 이상의 요소에 대해 동일한 ID를 사용하지 마십시오.이것은 허용되지 않으며 디버그하기 매우 어려운 문제를 야기합니다.제거합니다.id="191"링크에서 그리고 만약 클릭 핸들러에서 ID에 접근해야 한다면,$(this).closest('.li').attr('id'). 사실은 당신이 사용한다면 더 깨끗할 것입니다.data-id="123"그리고 나서..data('id')대신에.attr('id')액세스(요소 ID가 행에 있는 ID와 유사하지 않아도 되도록(데이터베이스?)

언랩을 사용하는 것은 어떻습니까?

<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();
});

저는 이 문제를 한 시간 동안 우연히 발견했습니다.한 시간 후 디버깅을 시도해 본 결과 다음과 같은 도움이 되었습니다.

$('.list').on('click', 'span', (e) => {
  $(e.target).parent().remove();
});

HTML:

<ul class="list">
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
</ul>

다음을 사용할 수도 있습니다.

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

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

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