快樂學習筆記: [jQuery] 動態新增及移除_Dynamic add and remove block(.append(), .remove())

jQuery的特效中，蠻常使用到的功能是動態新增及移除頁面的元素，很簡單的僅使用了 .append() 及 .remove() 兩個方法！

範例原始碼：

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>show demo</title>
	</head>
	<body>
	<!-- add new item Dynamically in the show block -->
	<div id="showBlock"></div>
	<!-- click the button to add new item -->
	<input type="button" id="btn" value="addItem" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script>
	//set the default value
	var txtId = 1;

	//add input block in showBlock
	$("#btn").click(function () {
	$("#showBlock").append('<div id="div' + txtId + '">Input:<input type="text" name="test[]" /> <input type="button" value="del" onclick="deltxt('+txtId+')"></div>');
	txtId++;
	});

	//remove div
	function deltxt(id) {
	$("#div"+id).remove();
	}
	</script>
	</body>
	</html>

範例結果：

範例是以新增input text為例，可依需求置換成圖片或是其他元素。

參考資料：
[1] http://api.jquery.com/append/
[2] http://api.jquery.com/remove/

快樂學習筆記