I can't bind event to remove field in jQuery

Question

I make this script in jQuery to add and remove fields, first I separate the functions in object literal way, and I can add fields by cloning the div. But I can't bind the remove button to cloned element.

 <!--html with text field -->   
 <div class="row" id="descripcion_pregrado">
     <div class="col-xs-8 col-sm-8 col-lg-8">
         <div class="form-group">
            {{ Form::label('descripción', 'Descripción: *')}}
            {!! Form::text('descripcion_pregrado[]',null,
                            array(
                            'class'=>'form-control'
                             )) !!}
        </div>  
    </div>
    <div class="col-xs-3 col-sm-3 col-lg-3">
        <div class="form-group">
            {{ Form::label('dedicacion', 'Dedicación Horas Semanales: *') }}
            {!! Form::number('dedicacion_pregrado[]',0,
                            array(
                            'class'=>'form-control',
                            'min'=>0,
                            'step'=>'.01'
                             )) !!}
        </div>  
    </div>
    <div class="col-xs-1 col-sm-1 col-lg-1" style="padding-top:0px">    
        <div class="form-group">
            <a href="javascript:void(0);" class="add_button plus-minus" title="Add field"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
        </div>
    </div>
</div>

Here is the jQuery it works with add field but it doesn't with remove field

(function () {

    var campos = {
        config: {
            start: 0,
            max: 9,
        },
        init: function (config) {
            $.extend(campos.config.config);
            this.cacheDom();
            this.bind();
        },
        cacheDom: function () {
            this.$el = $("#descripcion_pregrado");
            this.$button = this.$el.find("a");
            this.$remove = this.$el.find(".remove_button");

        },
        bind: function () {
            this.$button.on('click', this.addField.bind(this));
            this.$remove.on('click', this.removeField.bind(this));
        },
        addField: function () {
            if (campos.config.start < campos.config.max) {
                var cloned = this.$el.clone();
                this.$el.after(cloned);
                cloned.find('span').attr('class', 'glyphicon glyphicon-minus-sign');
                cloned.find('a').attr('class', 'remove_button plus-minus');
                this.config.start++;

            } else {

                alert('max ' + campos.config.max + ' inputs');
            }
        },
        removeField: function () {
            console.log($(e.target));
            var $remove = $(e.target).closest(this.$el).remove();
            this.cacheDom();
        }

    }
    campos.init();
})();

Have you tried-: removeField: function(e) {} – Albeis Dec 13 '17 at 20:12 — Albeis, Dec 13 '17 at 20:12
finally i get it, this is how i solve it – Juan Pablo Morales Dec 18 '17 at 15:09 — Juan Pablo Morales, Dec 18 '17 at 15:09

score 0 · Answer 1 · edited Dec 18 '17 at 15:40

;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global
    // variable in ECMAScript 3 and is mutable (i.e. it can
    // be changed by someone else). undefined isn't really
    // being passed in so we can ensure that its value is
    // truly undefined. In ES5, undefined can no longer be
    // modified.

    // window and document are passed through as local
    // variables rather than as globals, because this (slightly)
    // quickens the resolution process and can be more
    // efficiently minified (especially when both are
    // regularly referenced in your plugin).

    // Create the defaults once
    var campos = "Campos",
        defaults = {

            start: 0,
            max  : 9,

        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the
        // contents of two or more objects, storing the
        // result in the first object. The first object
        // is generally empty because we don't want to alter
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = campos;

        this.init();
    }

    Plugin.prototype = {

        init: function() {
            // Place initialization logic here
            // You already have access to the DOM element and
            // the options via the instance, e.g. this.element
            // and this.options
            // you can add more functions like the one below and
            // call them like so: this.yourOtherFunction(this.element, this.options).
            this.cacheDom(this.element,this.options);
            this.bind();
            this.lastChild();
        },

        yourOtherFunction: function(el, options) {
            // some logic
        },
        cacheDom: function(el, options){

            this.$button  = $(el).find(".add_button");              
            this.$remove  =  $(el).find(".remove_button");              
            this.$firstEl = $(el).find(':first');

        },
        bind : function(){
            this.$button.on('click',this.addField.bind(this));
            this.$remove.on('click',this.removeField.bind(this));
        },
        addField: function() {
            this.lastChild();
            if(this.options.start < (this.options.max-1)){

                    var cloned = $(this.element).clone(true);
                    $(this.element).after(cloned);
                    this.options.start++;


            }else{

                alert('max '+ (this.options.max) +' inputs');
            }
        },
        removeField: function(e) {
            console.log(e);
            this.options.start--;
            $(e.target).parent().parent().parent().parent().remove();


        },
        lastChild:function(){
                console.log(this.$remove.length);
            }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn.campos = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + campos)) {
                $.data(this, "plugin_" + campos,
                new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );

osoblanco · Answer 2 · 2017-12-13T21:25:14.990

-1

Is the problem that you aren't passing e as a parameter in the function signature?

 removeField: function (e) {
            console.log($(e.target));
            var $remove = $(e.target).closest(this.$el).remove();
            this.cacheDom();
        }

edited Dec 13 '17 at 21:25

answered Dec 13 '17 at 20:41

osoblanco

468
2
10

I can't bind event to remove field in jQuery

2 Answers2