JavaScript中的错误

Question

A couple of unexpected bugs here that I can't figure out.

1. Clicking the '+' button works all the time except when you '-' all the cloned divs away until there is one left.. then the '+' button no longer works.
2. When the div is cloned, it is supposed to clear the checkboxes and radio buttons.. but it doesn't. It DOES clear the text fields and the select.

General code help always welcome! Thanks...

    <div class="cloned" id="div1">

    <input type="text" id="_name" name="1_name" placeholder="Field Name" required>
    <input type="text" id="_hint" name="1_hint" placeholder="Hint">

    <select id="_fieldtype" name="1_fieldtype" required>
    <option value="">Field Type...</option>
    <option value="bla">bla</option>
    <option value="blabla">blabla</option>
    </select>

    <input type="checkbox" id="_required" name="1_required" value="true"> Required
    <input type="checkbox" id="_search" name="1_search" value="true"> Searchable
    <input type="checkbox" id="_editable" name="1_editable" value="true"> Editable
    <input type="radio" id="_label" name="label" value="1_label"> Label
    <input type="radio" id="_unique" name="unique" value="1_unique"> Unique
    <input type="button" class="add" value="+">
    <input type="button" class="remove" value="-">

    </div>


    <script>

    function addDiv(){
        window.num = $('.cloned').length;
        var num = $('.cloned').length;
        var newnum = num + 1;
        var newelem = $('#div'+num).clone().attr('id','div'+newnum);
        $.each(newelem.children(), function(){
            if (this.type == 'radio'){
                $(this).attr('value',newnum+this.id).removeAttr('checked')
            }
            else if (this.type == 'button'){
                $(this).removeAttr('checked')
            }
            else if (this.type != 'button'){
                $(this).attr('name',newnum+this.id).attr('value','')
            }
        });
        $('#div'+num).after(newelem);

    };

    function removeDiv(object){
        window.num = $('.cloned').length;
        if (num != 1)
            $(object.parentNode).remove();

    };

    $('.add').live('click', function(){
        addDiv();
    });

    $('.remove').live('click', function(){
        removeDiv(this);
    });

    </script>

Answer 1

for your second problem you have the button repeated change the code to

else if (this.type == 'checkbox' || this.type == 'radio'){
                $(this).removeAttr('checked')
            }

the problem of removing the divs is that when you remove the first div and try to clone a new one you are still looking for the first div ie div with id div1 to clone and it cant be found.. this is cos of yo ur weird handling of numbers.. instead just hold a hidden copy of the div always and use the same hidden div to clone it and you odnt have to worry about clearing the contents, checkbox etc. cos it will be in the default state..

thus you will have

<div style="display:none" id="masterDiv">

    <input type="text" id="_name" name="1_name" placeholder="Field Name" required>
    <input type="text" id="_hint" name="1_hint" placeholder="Hint">

    <select id="_fieldtype" name="1_fieldtype" required>
    <option value="">Field Type...</option>
    <option value="bla">bla</option>
    <option value="blabla">blabla</option>
    </select>

    <input type="checkbox" id="_required" name="1_required" value="true"> Required
    <input type="checkbox" id="_search" name="1_search" value="true"> Searchable
    <input type="checkbox" id="_editable" name="1_editable" value="true"> Editable
    <input type="radio" id="_label" name="label" value="1_label"> Label
    <input type="radio" id="_unique" name="unique" value="1_unique"> Unique
    <input type="button" class="add" value="+">
    <input type="button" class="remove" value="-">

    </div>

and always clone that.

one more thing in general avoid global variables as much as possible.. You never know what might end up changing it..

Answer 2

Really, you should separate your model from your view. Not only should you not have to do any of those checks, the fact that you're doing them means that your structure could be improved.

See the fiddle: http://jsfiddle.net/cnJa9/3/