jQuery增加删除HTML标签实例详解

昨天在写 jQuery 的时候碰到个小问题纠结了我蛮久，后来在 foxling 的指点下才知道是那么一回事。

问题是这样滴，有一个 UL 列表，在某个事件响应之后要把 UL 列表里面的 LI 内容给逐行移除掉，于是有了下面的 HTML 代码：

 代码如下 复制代码

<ul id="test">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
<a href="#" id="del">删除</a>

以及下面的 JavaScript 代码：

 代码如下 复制代码
$('#del').click(function(){
   var list = $('#test');
   var len = list.find('li').length;
 
   for(var i = 0; i < len; i++){
      list.find('li:eq('+ i +')').remove();
   }
});

我刚写完的时候觉得逻辑很合理，应该没什么问题，先计算出 UL 标签里面有多少个 LI ，然后利用 For 循环逐个把里面每个 LI 的内容移除掉，但是代码一执行的时候，问题就出来了，它并没有把里面的内容全部移除掉，而是还有一些 LI 遗留在页面上。

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
 $('#del').click(function(){
  var list = $('#test');
  var len = list.find('li').length;
  
  for(var i = 0; i < len; i++){
   list.find('li:eq('+ i +')').remove();
  }
 });
});
</script>
</head>
<body>
<ul id="test">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
</ul>
<a href="#" id="del">删除</a>
</body>
</html>。

后来在 foxling 的指点下，才得知这其中的原因，就是当 i 等于 0 的时候，这时是正确的删除了第一个 LI 标签(其索引为 0)；当 i 等于 1 的时候，原来列表中的第 2 个 LI 标签的索引由于前一个 LI 标签被删除的原因从 1 变成了 0，所以该 LI 标签并没有被移除，而此时被移除的是原来列表中的第 3 个 LI 标签，此时它的索引已变为 1 了，如此循环……这就是为什么执行完该 for 循环之后还有一些内容没有被移除的原因了。

上面的 JavaScript 只要修改一点点的地方就 OK 了：

 代码如下 复制代码

$('#del').click(function(){
   var list = $('#test');
   var len = list.find('li').length;
 
   for(var i = 0; i < len; i++){
      list.find('li:eq(0)').remove();//因为每次循环删除一个 LI 标签后，跟在其后的 LI 标签的索引都变为了 0
   }
});

例

 代码如下 复制代码

<DIV id="Previewpics">
<LI id="fileid16"><IMG src="https://img.lookmw.cn/201005/127311533698.gif.thumb_100_75.jpg"><BR>
<INPUT onclick="window.open(this.src)" type="button" src="uploads/201005/127311533698.gif" value="大图">
<INPUT onclick="deleteimg(this.src)" type="button" src="16" value="删除">
</LI>
<LI id="fileid17"><IMG src="https://img.lookmw.cn/201005/127311534291.jpg.thumb_100_75.jpg"><BR>
<INPUT onclick="window.open(this.src)" type="button" src="uploads/201005/127311534291.jpg" value="大图">
<INPUT onclick="deleteimg(this.src)" type="button" src="17" value="删除">
</LI>
<LI id="fileid18"><IMG src="https://img.lookmw.cn/201005/127311536399.gif.thumb_100_75.jpg"><BR>
<INPUT onclick="window.open(this.src)" type="button" src="uploads/201005/127311536399.gif" value="大图">
<INPUT onclick="deleteimg(this.src)" type="button" src="18" value="删除">
</LI>
</DIV>
再看执行js后效果:

<DIV id="Previewpics">
<LI id="fileid16"><IMG src="https://img.lookmw.cn/201005/127311533698.gif.thumb_100_75.jpg"><BR>
<INPUT onclick="window.open(this.src)" type="button" src="uploads/201005/127311533698.gif" value="大图">
<INPUT onclick="deleteimg(this.src)" type="button" src="16" value="删除">
</LI>
<LI id="fileid17"><IMG src="https://img.lookmw.cn/201005/127311534291.jpg.thumb_100_75.jpg"><BR>
<INPUT onclick="window.open(this.src)" type="button" src="uploads/201005/127311534291.jpg" value="大图">
<INPUT onclick="deleteimg(this.src)" type="button" src="17" value="删除">
</LI>
</DIV>

对比一下就知道啦.li的id为fileid18的被删除了.
主要代码如下:

 代码如下 复制代码

$('li').remove('#fileid'+fid);

例2

 代码如下 复制代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  var spotMax = 3;
  if($('div.spot').size() >= spotMax) {$(obj).hide();}
  $("input#add").click(function(){     addSpot(this, spotMax);
  });
});

function addSpot(obj, sm) {
$('div#spots').append(
    '<div class="spot">' +
    '<input type="text" name="spot_title" /> ' +
    '<input type="text" name="spot_addr" /> ' +
    '<input type="text" name="spot_url" />  ' +
    '<input type="button" class="remove" value="Delete" /></div>')
  .find("input.remove").click(function(){
    $(this).parent().remove();
    $('input#add').show();
  });

  if($('div.spot').size() >= sm) {$(obj).hide();}
};
</script>
</head>

<body>
<form action="test.php" method="post"  name="asdf" id="asdf">
  <div id="spots">
    <input type="button" id="add" name="add" value="add" /><br />
  </div>
  <input type="button" name="Submit" value="Submit" id="send" />
</form>
<script>
  $('#send').click(function(){
  alert('Demonstration Only: submit disabled');
});
</script>
</body>
</html>
时间： 2024-09-21 21:09:50

jQuery增加删除HTML标签实例详解的相关文章

jQuery中ajax - get() 方法实例详解_AJAX相关

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery中ajax - get() 方法实例详解

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

JQuery中层次选择器用法实例详解_jquery

本文实例讲述了JQuery中层次选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

jQuery中ajax - post() 方法实例详解_AJAX相关

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

Jquery中基本选择器用法实例详解_jquery

本文实例讲述了Jquery中基本选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

PHP与jquery实时显示网站在线人数实例详解_php实例

我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果. 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"></span>&

jQuery中ajax - post() 方法实例详解

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

php rmdir使用递归函数删除非空目录实例详解_php技巧

 首先向大家介绍一下rmdir()函数. php rmdir()函数 rmdir - 删除空目录 语法: bool rmdir ( string $dirname [, resource $context ] ) 尝试删除 dirname 所指定的目录. 该目录必须是空的,而且要有相应的权限. 失败时会产生一个E_WARNING级别的错误. 参数: 1.dirname:目录的路径. 2.context:在 PHP 5.0.0 中增加了对上下文(Context)的支持. php rmdir()删除

jQuery实现的自定义滚动条实例详解_jquery

本文实例讲述了jQuery实现的自定义滚动条.分享给大家供大家参考,具体如下: 可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $("#a").jscroll(); demo: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=