JavaScript でノードを削除する方法の詳細な図による説明-jsチュートリアル-php.cn

JavaScript でノードを削除する方法の詳細な図による説明

yulia

リリース： 2018-10-09 11:26:38

オリジナル

4880 人が閲覧しました

フロントエンド開発ではJavaScriptがよく使われますが、JSを使って末尾ノードを削除する方法をご存知ですか？この記事では、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>

ログイン後にコピー

手順の詳細な説明:

最初のステップは、id="myList" の要素を見つけることです。、

親要素
var list=document.getElementById("myList")

2 番目のステップは、要素である

を見つけることです。削除したいのは
var li =document.getElementById("li1")

3番目のステップです。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>

ログイン後にコピー

レンダリング:

JavaScript でノードを削除する方法の詳細な図による説明