美文网首页
通过jquery的clone方法实现动态添加input并删除in

通过jquery的clone方法实现动态添加input并删除in

作者: 0xkevin | 来源:发表于2017-08-02 16:12 被阅读0次

使用jQuery的clone()方法可以实现动态添加一个或一组元素,很方便,但是需要注意一个问题是:clone(true)表示可以复制事件和元素,clone(false)表示只复制元素,不复制事件。之前我在网上搜到好多关于动态添加和删除元素的相关文章,都不能解决我目前的需求,而且删除还不好使(原因是clone(true)后,把click里面的方法都复制了一份)。今天我自己解决了这个问题,mark一下,以备后用。

HTML代码:

<div class="widget-body">  
    <div class="widget-main">           
        <div class="form-group">  
            <label class="col-sm-3 control-label no-padding-right"> </label>  
            <div class="col-sm-9">  
                <span class="input-icon">  
                    <select id="switch_t_language" name="tl">  
                        <option value="en">English</option>           
                        <option value="zh-CN">Chinese(Simplified)</option>    
                        <option value="zh-TW">Chinese(Traditional)</option>        
                        <option value="ja">Japanese</option>         
                        <option value="ko">Korean</option>           
                    </select>  
                </span>  
                <span class="input-icon">                                               
                    <i class="icon-comment green"></i>  
                    <input type="text" id="message" name="message" style="width:500px;" placeholder="Send Messages...">  
                </span>  
                <a href="javascript:;" class="btn btn-link dictpush-plus" >  
                    <i class="fa fa-plus green"></i>  
                </a>  
                <span id="message_span"></span>  
            </div>  
        </div>  
    </div>  
</div>  

JS代码:

$(function(){         
    //add row  
    $(".dictpush-plus").click(function(){  
        if($(this).hasClass("dictpush-plus")){//这个是添加一组元素的  
            $(this).parents(".form-group").clone(true).appendTo($(".widget-main"));  
            $(this).children().removeClass("fa-plus").removeClass("green").addClass("fa-minus").addClass("red");  
            $(this).removeClass("dictpush-plus").addClass("dictpush-minus");  
        }else if($(this).hasClass("dictpush-minus")){//这个判断是为了删除元素用的,不能用bind或者click的方法,试了都不行  
            $(this).parents(".form-group").remove();  
        }  
    });  
});  

最终效果如下:

效果图

相关文章

  • 通过jquery的clone方法实现动态添加input并删除in

    使用jQuery的clone()方法可以实现动态添加一个或一组元素,很方便,但是需要注意一个问题是:clone(t...

  • 2019-09-19

    jquery实现动态添加html代码 阅读目录 一.html()方法 二.prepend()方法-内部插入 三.p...

  • day9-jQuery

    十七.什么是jQuery 十八.jQuery属性操作和样式 十九.jQuery的动态添加和删除 20.Ajax

  • 实现一个 jQuery 的 API

    本文通过使用原生DOM API实现类似于jQuery的元素添加类和获取元素文字的方法来理解jQuery的实现原理 ...

  • javascript 动态设置input的placeholder

    方法1:通过js来设置文本框input的placeholder值 方法2:通过jquery设置文本框input的p...

  • jQuery 添加和删除HTML元素

    本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。 jQuery 中用于添加 HTML 元...

  • jQuery 添加和删除HTML元素

    本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。 jQuery 中用于添加 HTML 元...

  • 【个人】系统学习-ArrayList

    学习ArrayList源码 构造方法 添加元素方法 ArrayList实现了clone接口,并重写了clone方法...

  • Bom 对象和Dom树

    通过获取设备信息来进行跳转页面 添加标签 删除标签 修改标签的属性和class jquery 实现显示或隐藏

  • js对象

    1.动态添加属性方法 2.动态删除属性和方法 3.构造方法

网友评论

      本文标题:通过jquery的clone方法实现动态添加input并删除in

      本文链接:https://www.haomeiwen.com/subject/jecylxtx.html