JavaScript新增一個文字框並帶有刪除按鈕

admin發表於2018-04-03
JavaScript

實際操作中可能需要動態的建立和刪除一個元素，比較常見是新增一個文字框和一個刪除按鈕，點選刪除按鈕可以刪除相應的文字框，下面就結合一個例項詳細介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>新增和刪除文字框-螞蟻部落</title>
<style type="text/css">
ul{
  list-style:none
}
</style>
<script type="text/javascript">
window.onload=function(){
  var main=document.getElementById("main");
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    var len=main.getElementsByTagName("li").length;
    var oul=main.getElementsByTagName("ul")[0];
    var oli=document.createElement("li");
    var input=document.createElement("input");
    var button=document.createElement("input");
    input.id="id"+len;
    input.type="text";
    button.type="button";
    button.id="bt"+len;
    button.value="點選刪除";
    oli.appendChild(input);
    oli.appendChild(button);
    oul.appendChild(oli);
    button.onclick=function(){
       button.parentNode.remove(button.parentNode);
    }
  } 
}
</script>
</head>
<body>
<input type="button" value="點選新增一項" id="bt" />
<div id="main">
<ul>
   <li><input type="text"></li>
</ul>  
</div>
</body>
</html>

一.程式碼註釋:

（1）.window.onload=function(){}，文件載入完畢再去執行函式中的程式碼。

（2）.var main=document.getElementById("main")，獲取id屬性值為main的元素。

（3）.var bt=document.getElementById("bt")，獲取id屬性值為bt的元素。

（4）.bt.onclick=function(){}，為bt繫結事件處理函式。

（5）.var len=main.getElementsByTagName("li").length，獲取main下面li元素的數目。

（6）.var oul=main.getElementsByTagName("ul")[0]，獲取main下面的第一個ul元素。

（7）.var oli=document.createElement("li")，建立一個li元素。

（8）.var input=document.createElement("input"),建立一個input元素。

（9）.input.id="id"+len，設定input物件的id屬性值，不設定這裡也麼什麼影響。

（10）.input.type="text"，將input的type屬性設定為text，也就是文字框。

（11）.button.type="button"，將一個建立的input元素的type屬性值設定為button，即建立一個按鈕。

（12）.button.id="bt"+len，設定id屬性值，不設定也沒關係。

（13）.button.value="點選刪除"，設定按鈕的value屬性值。

（14）.oli.appendChild(input)，為li元素新增文字框。

（15）.oli.appendChild(button)，為li元素新增按鈕。

（16）.oul.appendChild(oli)，為ul元素新增li。

（17）.button.onclick=function(){}，為當前建立的刪除按鈕繫結事件處理函式。

（18）.button.parentNode.remove(button.parentNode)，刪除當前按鈕所在的li元素。

二.相關閱讀：

（1）.window.onload參閱window.onload 事件一章節。

（2）.document.getElementById參閱document.getElementById()一章節。

（3）.getElementsByTagName參閱JavaScript getElementsByTagName()一章節。

（4）.document.createElement參閱document.createElement()一章節。

（5）.appendChild參閱JavaScript appendChild()一章節。

（6）.parentNode參閱JavaScript parentNode 屬性一章節。

相關文章