jquery 点击删除 添加 元素

HTML城市选择器操作
最新推荐文章于 2023-04-17 19:11:51 发布
最新推荐文章于 2023-04-17 19:11:51 发布
阅读量564 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42467563/article/details/83375970
本文介绍了一个使用HTML和jQuery实现的城市选项菜单操作案例。通过点击按钮，用户可以将选项从一个下拉菜单移至另一个，实现城市的选择和管理。文章详细展示了如何利用jQuery的appendTo方法进行元素转移。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id='one'  size="10">
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>香港</option>
            <option>澳门</option>
            <option>台湾</option>
            <option>郑州</option>    
            <option>重庆</option>
            <option>天津</option>
            <option>珠海</option>
            <option>厦门</option>
            <option>杭州</option>    
        </select>
        <button>添加</button>
        <button>删除</button>
        <select id="two" size="6">
            
    
        </select>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    
    <script>
        $(function(){
            $('button:first').click(function(){
                $('#one option:selected').appendTo($("#two"))
        
            })
            
            $('button:eq(1)').click(function(){
                $('#two option:selected').appendTo($("#one"))
        
            })
       
        })

    </script>

</html>

 

使用jQuery设置点击删除事件
ByteWhiz的博客
10-03 226
jQuery是一个流行的JavaScript库，可以简化JavaScript编程，并提供丰富的功能和交互效果。下面是一个详细的步骤指南，演示如何使用jQuery设置点击删除事件，并附带相应的源代码。通过选择删除按钮并在点击事件处理程序中删除相应的列表项，我们可以实现点击删除功能。接下来，我们需要创建一个HTML结构，以便将点击删除事件应用于其中的元素。在这个例子中，我们将创建一个简单的列表，并为每个列表项添加删除按钮。在浏览器中打开包含上述HTML和jQuery代码的页面，并尝试点击任何一个删除按钮。
jquery 删除元素的onclick事件
skysys的研究小屋
12-28 2258
网上很多的资料中有一种方法： obj.unbind(“click”, openFavorite);//取消绑定onclick事件，但有时好像不起作用。 后来发现一种方法： obj.attr(‘onclick’, ‘’);//使onclick的值为空，成功了。
jquery点击添加 点击删除
weixin_46733392的博客
03-15 148
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script> </head> <body> <t
jquery动态添加删除行 点击按钮动态添加行或动态删除行
08-07
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
jquery表格点击增加和删除样式
qq_22334267的专栏
01-07 330
generatedTableDe是表格，点击第一列的时候，切换样式 $('#generatedTableDe').children().children().each(function(i,n){         $(n).bind("click",         function(){         $('#generatedTableDe').children().ch
jq表格的增加与删除
Q_004的博客
11-03 754
表格实现增加 删除 人员信息
Jquery 动态添加删除功能
椒盐薄荷糖
03-26 964
  1、将Select的选项添加到结果中$add.on('click', function () { $.ajax({ url: '/Includes/Controls/AssociatedCountrysHandler.ashx', data: { action_type: 'add-associat...
JQuery中DOM操作之增加与删除
qq_42438153的博客
05-05 265
效果图： 功能代码： <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th>&nbsp;</th> </tr> ...
jQuery添加或删除元素
m0_74913905的博客
04-17 1139
jQuery的宗旨：写的更少，做得更多！今天分享四种添加元素与两种删除元素。
Js如何删除所有子元素以及当前元素
itclanCoder
02-02 3452
示例展示deleteallelem具体描述在原生js当中,html的内容元素总是以嵌套的关系存在于网页中,因此,可以通过遍历树的方法访问网页里的每一个元素,当然也是可以删除指定的子元素的原生js代码//删除元素的函数 functiondeleteChilds(){ varul=document.getElementsByTagName("ul")[0];//获取父级DOM ...
jquery在当前点击事件函数中删除当前元素
warmcore的博客
04-15 7257
上学期刚开始学JavaScript时就遇到问题，比如为当前元素添加了onclick函数，但在函数触发中要删除当前元素，直接删除，不用问，直接报错。那时候最后怎么解决我忘了，好像是网上搜的，当时没在意。今天又遇到了，可能是因为不再是当初那个初学者的原因，今天很快想出了个办法。 说明下，这次没用原生js，用了jquery框架。 举个例子，比如有个a标签 删除。在js脚本文件中,写上 $(docu
jQuery实现动态添加和删除（点击按钮添加在页面添加和删除元素）
祈澈菇凉
01-26 7839
1：点击添加按钮弹出弹框，form表单可以填写相关的信息 2：点击保存按钮，相关信息会显示在界面的列表里 3：鼠标滑动界面列表的标签，会出现删除按钮的图标，点击删除成功 4：代码如下，可以根据需要自行修改（可能会有多余的代码，但是不会影响效果） &lt;!DOCTYPE html&gt; &lt;html&gt; ...
jquery点击删除按钮,删除当前的div
祈澈菇凉
07-04 9607
现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全都删掉了，但是我只需要点击哪一行div里面的删除按钮，就删除哪一行，其实很简单，只需要写一个this事件即可。 参考代码如下： <!DOCTYPE html> <html lang="en"> <head> ...
jquery中当点击子节点时如何实现删除父节点的问题
老蔡学代码
04-27 8660
父节点的class="a",子节点的class="b"，当点击子节点时删除父节点，在function remove(){}里怎么实现可以这样做： $('.b').click(function(){ $(this).closest('.a').remove() })试了很好用。...
jQuery点击删除按钮，删除当前div
前端开发中遇到的问题
07-30 3226
现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全部删掉，但我只需要点击哪一行div里面的删除按钮，就删除哪一行。 参考代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g...
JQuery点击按钮删除当前的div
小伙伴们全都Lucky！
09-02 1677
1.图片 2.html部分 <div > <div > <img src="images/home.png" /> <span>我是盒子1</span> <span class="editdelete">删除</span> </div&g.
【jQuery】简单的点击删除按钮清空输入框的内容
zuncle的博客
02-09 2万+
测试代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div class="text"> 出发地：<input type="text"/> 目的地：<i
JS点击删除按钮删除所在的行
热门推荐
peppa_pig的博客
02-26 2万+
 某些时候我们需要将我们输入的信息录入到表格中，并且点击行尾的删除按钮可以删除当前行，下面的代码可以简单实现这个功能。（又是取名荒的一天......） &lt;body&gt; 姓名&lt;input type="text" id="ipt1" /&gt; 性别&lt;input type="text" id="ipt2" /&gt; &lt;i
jQuery中添加元素删除元素的方法
weixin_44484621的博客
06-09 4070
开发工具与关键技术：VS、jQuery 作者：#33 撰写时间：撰写时间：2019年06月06日 jQuery添加元素的方法和移除元素的方法： 引入jQuery插件： <script src="jquery/1.10.2/jquery.min.js"></script> 向元素开头和结尾添加text文本内容，（红色箭头处）prepend...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值