<script>

var target = [];

target [0] = "aaa000";

target [1] = "bbb111";

target [2] = "ccc222";

target [3] = "ddd333";

target [4] = "eee444";

target [5] = "fff555";

console.log("使用push()添加元素之前长度："+target.length);

target.push("ggg666");//target [6] = "ggg666";

console.log("使用push()添加元素之后长度："+target.length);

console.log(target[6]);//根据下标获取元素值

var local = $.inArray("ccc222", target); //根据元素值查找下标，不存在返回-1

target.splice(local,1);//根据下标删除一个元素   1表示删除一个元素

console.log("使用splice()删除1个元素之后长度：" + target.length);

</script>

效果图

可以用作动态添加标签，以及删除标签

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

</head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<style>

.baseDiv {

height : 1%;

width : 100%;

background-color : aqua;

}

.newDiv {

height : 1%;

width : 100%;

background-color : yellow;

margin-top : 1%;

cursor : pointer;

}

</style>

<body>

<input id="target" type="text" style="width:100%;">

<button id="addDiv">添加div元素到baseDiv</button>

<div id="baseDiv" class="baseDiv">

<p>这里一个名为baseDiv的div</p>

<p>这是一个段落。</p>

</div>

<br>

<button id="removebaseDiv"  >移除baseDiv</button>

<script>

var num = 1;

var target = [];

$(function(){

    $('#addDiv').bind('click', function(event) {

        $("<div id='div"+ num +"' onclick='removeDiv(this)' class='newDiv'>这是新增的div"+ num +",点击可以删除</div>").appendTo("#baseDiv");

		target.push("这是新增的div"+num+",点击可以删除");

		$('#target').val(target);

		num++;

    });

})

$(function(){

    $('#removebaseDiv').bind('click', function(event) {

        $('#baseDiv').remove();

    });

})

function removeDiv(node) {

	var content = $('#'+node.id+'').text();

	var local = $.inArray(content, target);

	target.splice(local,1);

	$('#target').val(target);

	$('#'+node.id+'').remove();

}

</script>

</body>

</html>

效果图

连续多次点击添加div元素到baseDiv按钮

点击这是新增的div3,点击可以删除

JQuery 数组获取和删除元素的更多相关文章

  1. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  2. （转载）php数组添加、删除元素的方法

    (转载)http://www.phpgs.com/html/php/phpjichu/20120130440.html 带来一篇php 数组 添加元素.删除元素的方法的文章,有需要的php学习者参考下 ...

  3. jquery选择器:获取父级元素、同级元素、子元素

    jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...

  4. js进阶 11-7 jquery如何获取和改变元素的位置

    js进阶 11-7  jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...

  5. js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  6. js数组依据下标删除元素

    最近在项目中遇到了一些问题,基础性的东西记得不牢固,就总结一下放在这里备再次查找,对操作js数组的一些问题一些常用的记录! 1.创建数组 var array = new Array(); var ar ...

  7. php 数组 添加元素、删除元素

    拆分数组 PHP数组添加一个元素的方式: push(), arr[], Php代码 $arr = array(); array_push($arr, el1, el2 ... eln); 但其实有一种 ...

  8. JavaScript（20）jQuery HTML 加入和删除元素

    jQuery - 加入元素 通过 jQuery,能够非常easy地加入新元素/内容. 加入新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepen ...

  9. iOS遍历数组的同时删除元素

    我们在遍历可变数组时,最好不要做删除数组中元素的操作. 因为删除操作可能会引起数组容量的变化,导致数组越界等问题. 以前在使用for循环遍历的时候遇到过这个问题. 当时的做法是使用enumerateO ...

随机推荐

  1. python类与对象-如何让对象支持上下文管理

    如何让对象支持上下文管理 问题举例 一个telnet客户端的类TelnetClient, 调用实例的connect(),login(),interact方法 启动客户端与服务器交互,交互完毕后需要调用 ...

  2. 尝试启动 ADB 服务器时出错 解决方法

    启动CMD→ adb kill-server → adb start-server;

  3. python的高级数组之稀疏矩阵

    稀疏矩阵的定义: 具有少量非零项的矩阵(在矩阵中,若数值0的元素数目远多于非0元素的数目,并且非0元素分布没有规律时,)则称该矩阵为稀疏矩阵:相反,为稠密矩阵.非零元素的总数比上矩阵所有元素的总数为矩 ...

  4. 接口自动化测试持续集成--Soapui接口功能测试参数化

    按照自动化测试分层实现的原理,每一层的脚本实现都要进行参数化,自动化的目标就是要实现脚本代码与测试数据分离. 当测试数据进行调整的时候不会对脚本的实现带来震荡,从而提高脚本的稳定性与灵活度,降低脚本的 ...

  5. centos7基于SVN+Apache+IF.svnadmin实现SVN的web管理

    一.介绍 本文介绍的是CentOS7上搭建基于Apache.SVN Server.iF.svnadmin实现web后台可视化管理SVN. iF.SVNAdmin应用程序是Subversion授权文件基 ...

  6. js 字符串操作

    1.charCodeAt方法返回一个整数,代表指定位置字符的Unicode编码. strObj.charCodeAt(index) 说明: index将被处理字符的从零开始计数的编号.有效值为0到字符 ...

  7. mysql索引类型(按存储结构划分)

    关于mysql索引类型,网上有很多相关的介绍,给人的感觉很乱.鄙人在翻阅相关书籍后,特意梳理了一下.哪里有不对的地方,欢迎指正! 1. B-Tree索引 它使用B-Tree数据结构来存储数据,实际上很 ...

  8. java个内部类的总结

    内部类的概念 成员内部类 访问成员内部类格式: 案例 局部内部类 案例 静态内部类 访问格式: 案例 匿名内部类 格式: 案例 内部类的概念 将类定义在类的内部,那么该类就成为内部类 注意: 内部类是 ...

  9. 《CSS世界》读书笔记（十二）

    <!-- <CSS世界>张鑫旭著 --> 正确看待 CSS 世界里的 margin 合并 什么是 margin 合并 块元素的上外边距(margin-top)与下外边距(mar ...

  10. 5.1JAVA基础复习——JAVA中的静态代码块、构造代码块、构造函数、局部代码块区别

    构造代码块: 在类中定义可以给所有对象进行初始化.局部代码块: 在方法中定义属性的生命周期.静态代码块: 在类中定义用于给类调用时属性的初始化 构造函数与构造代码块的区别: 构造函数是给对应的对象进行 ...