>  기사  >  웹 프론트엔드  >  JavaScript에서 노드를 삭제하는 방법에 대한 자세한 그래픽 설명

JavaScript에서 노드를 삭제하는 방법에 대한 자세한 그래픽 설명

yulia
yulia원래의
2018-10-09 11:26:384834검색

JavaScript는 프론트엔드 개발에 자주 사용되는데 JS를 사용하여 tail 노드를 삭제하는 방법을 알고 계시나요? 이 기사에서는 JS에서 클릭하여 노드를 삭제하는 방법과 JS에서 첫 번째 노드를 삭제하는 방법에 대해 설명합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

노드를 삭제하려면 먼저 삭제할 노드와 해당 상위 요소를 찾은 다음, RemoveChild를 사용하여 상위 요소에서 하위 요소를 삭제해야 합니다.

예: 목록에는 4개의 주요 회계 법인이 나열되어 있습니다. 버튼을 클릭하여 목록의 첫 번째 노드인 PricewaterhouseCoopers를 삭제하세요.

HTML 부분:

<ul id="myList">
 <li id="li1">普华永道(PwC)</li>
 <li id="li2">德勤(DTT)</li> 
 <li id="li3">毕马威(KPMG)</li> 
 <li id="li4">安永(EY)</li> 
</ul>

단계에 대한 자세한 설명:

첫 번째 단계는


  • var list=document.getElementById(의 상위 요소인 id="myList"가 있는 요소를 찾는 것입니다( "myList")

    두 번째 단계에서는 삭제하려는 요소인 id="li1"이 있는

  • 요소를 찾습니다.
    var li=document.getElementById("li1")

    세 번째 단계는 부모 요소에서 자식 요소를 삭제하려면 RemoveChild를 사용하세요.
    list.removeChild(li)

    참고: DOM은 삭제해야 할 요소와 해당 부모 요소를 알아야 합니다.

    또 다른 방법(동일 원칙): 먼저 자식을 찾습니다. 삭제해야 하는 요소를 삭제한 다음 parentNode 속성을 사용하여 해당 요소를 찾습니다. 해당 상위 요소의 코드는 다음과 같습니다.

    var li=document.getElementById("li1");
    li.parentNode.removeChild(li);

    JS는 첫 번째 노드뿐만 아니라 꼬리 노드도 삭제할 수 있으며, 원하는 대로 삭제할 노드에 대해 해당 노드의 위치를 ​​찾으면 됩니다.

    전체 코드는 다음과 같습니다.

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
     </head>
     <body>
      <ul id="myList">
       <li id="li1">普华永道(PwC)</li>
       <li id="li2">德勤(DTT)</li> 
       <li id="li3">毕马威(KPMG)</li> 
       <li id="li4">安永(EY)</li> 
      </ul>
      <p>单击按钮删除列表中的第一个元素</p>
      <button onclick="myFunction()">点击删除</button>
     </body>
     <script type="text/javascript">
      function myFunction(){
       var list=document.getElementById("myList");
       var li=document.getElementById("li1");
       list.removeChild(li);
      }
     </script>
    </html>

    Renderings:

    JavaScript에서 노드를 삭제하는 방법에 대한 자세한 그래픽 설명JavaScript에서 노드를 삭제하는 방법에 대한 자세한 그래픽 설명

    첫 번째 사진은 노드를 삭제하지 않은 효과이고, 두 번째 사진은 첫 번째 노드를 삭제한 후의 효과입니다.

    위에서는 JS에서 노드를 삭제하는 방법을 주로 소개했습니다. 초보자도 직접 시도해 볼 수 있도록 설명되어 있습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼 php 공공 복지 교육

    을 방문하세요.
  • 위 내용은 JavaScript에서 노드를 삭제하는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.