一个js添加删除项的简单示例（event对象中 target和currentTarget 属性的区别。）

发布日期：2017-05-10 12:16:48
delegateeventevent.currentTargetjavascriptjstarget

以下代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  #div1{width:300px;height:400px;border:solid black 1px;}
  </style>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
  $(document).ready(function(){
	  var i = 2;
  $("#btn").click(function(){ 
	  var idin = "text"+i;
	  var btid = "btn"+i;
	 $("#div1").append("<br/><a><input type='text' value='11111' id = "+idin+"></input>"+"<button id="+btid+">X</button><br/></a>");
	 i++;
  });
   $("a").click(function(){
	 $(this).remove();
     });
  });

  </script>
 </head>
 <body>
  <button id="btn">插入一个文本框</button>
  <hr/>
  <div id="div1">
  <a><input type="text" value="11111" id="text1"></input><button id='btn1'>X</button><br/></a>
  </div>
 </body>
</html>

这段代码能成功添加项，也能删除原先存在的第一项。但是不能成功删除新添加的项。因为新添加的项没有绑定相应点击移除事件。需要把这个事件委托给一直存在的parent来实现就可以了，改写并测试一下：

function x(){
	  var i = 2;
  $("#btn").click(function(){ 
	  var idin = "text"+i;
	  var btid = "btn"+i;
	 $("#div1").append("<br/><a><input type='text' value='11111' id = "+idin+"></input>"+"<button id="+btid+">X</button><br/></a>");
	 i++;
  });
   $("#div1").click(function(e){ var tag = e.target; if(tag.tagName.toLowerCase()=="button"){$(tag).parent("a").remove();}
	 
     });
  }

这个类似于下面这篇博文：写的非常好。

http://www.cnblogs.com/yewenxiang/p/6171411.html

发表评论