初學js 新節點的建立 刪除 的步驟

特羨慕寫出這些特效的進階程式員。我想學習，可總是不知道怎麼去思考，不知道怎麼去邏輯。有時候也很著急，這些都不怕，幸好還有人教我，指點我，這是我比較幸運的。但是我過不了自己這關了，自己最大的缺點就是 逃避，不會做的就放棄了，不會了就不會了，也不敢問了。改，這個大缺點一定得改。以下，是洋哥指點我的學習技巧，思路清晰，效率也有很大的提高。。廢話就不扯了，言歸正傳：
題目：btton 按鈕 一個添加 一個刪除 ，點擊添加按鈕就會添加一個節點，點擊刪除按鈕就會刪除最後一個節點，添加的新元素點擊一下就會被刪除。
步驟一： 分析思路 做好準備工作 （結構 行為 表現 分離既是 html結構 js指令碼 css樣式 分離）
首先:搭建html 結構，定義下css樣式，寫基本的指令碼（由於js指令碼與html結構是分離的 所以）。
複製代碼 代碼如下:
<div class="btns">
<input type="button" value="Add" id="addBtn"></input>
<input type="button" value="Remove" id="removeBtn"></input>
</div>
<div class="box" id="boxcon"></div>

js 分析：首先兩個button 的onclick 事件，其次，把添加和刪除都封裝成 方法，以便調用函數，達到重用的目的。
複製代碼 代碼如下:
window.onload = function() {
addBtn.onclick = function() {}
removeBtn.onclick = function() {}
}

步驟二： 寫個建立的方法：建立新節點
複製代碼 代碼如下:
function createEle() {
var newEle = document.createElement("div");// 定義新的元素節點變數
var newBtn = document.createElement("input");// 定義新的元素節點變數
var boxEle = document.getElementById ("boxcon");
//找到所要添加到裡面的那個元素 既是上一級元素，這裡用id標識符來尋找
newEle.className="con";//賦予建立元素的屬性 樣式寫在css裡
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);// 把建立的節點 添加到boxcon裡
}

步驟三： 寫刪除方法：刪除元素。
複製代碼 代碼如下:
function removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
// 刪除元素
}

步驟四：調用函數
複製代碼 代碼如下:
window.onload = function() {
addBtn.onclick = function() {
createEle();
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
}
}

呵呵總算完成的差不多了， 別急 還有一個功能。最後的一個功能。。（添加的新元素點擊一下就會被刪除）
over了。。。呵呵 關於這個this的用法 我還是不太懂。。。以後還需要仔細探究下。。。