ネイティブJavaScriptは、指定された子要素コードインスタンスを削除します。
この章では、指定された子要素を削除するためにネイティブJavaScriptを使用する方法を紹介します。
JQueryを使用してこの関数を実装する方が便利であることは誰もが知っていますが、ネイティブJavaScriptを使用するのは面倒ではありません。以下に紹介させてください。
jQueryがこの機能を実装する方法については、指定された子要素コードインスタンスの削除に関する章を参照してください。
コード例:
コードコピーは次のとおりです。
<!doctype html>
<html>
<メタcharset = "utf-8">
<title> wulin.com </title>
<style>
ul li {
幅:400px;
高さ:30px;
Line-Height:30px;
リストスタイル:なし;
}
</style>
<スクリプト>
window.onload = function(){
var obk = document.getElementById( "bt");
var obox = document.getElementById( "box");
var lis = obox.getelementsbytagname( "li");
obt.onclick = function(){
obox.RemoveChild(lis [1]);
}
}
</script>
</head>
<body>
<ul id = "box">
<li> wulin.comはあなたを歓迎します。一生懸命働くことによってのみ、明日はより良いことができます。 </li>
<li>誰も最初からマスターであり、一生懸命働かなければなりませんでした。 </li>
<li>毎日が新しい、大切な時間です。 </li>
</ul>
<input type = "button" id = "bt" value = "view effect"/>
</body>
</html>
上記のコードは当社の要件を実装し、以下はその実装プロセスを導入します。
コードコメント:
1.window.onload = function(){}、ドキュメントコンテンツが完全にロードされた後、関数内のコードを実行します。
2.Var obk = document.getElementById( "BT")、ボタン要素オブジェクトを取得します。
3.Var obox = document.getElementById( "ボックス")、ID属性値ボックスを使用して要素オブジェクトを取得します。
4.Var lis = obox.getElementsBytagname( "li")、Li要素のセットをボックス要素の下に取得します。
5.obt.onclick = function(){}、ボタンのクリックイベントハンドラー関数を登録します。
6.Obox.RemoveChild(lis [1])、親要素の指定された子要素を削除します。