1

数日前、HTML 要素の複製に関する質問をしました。JQuery関数を機能させましたが、ユーザーが必要に応じて要素（この場合はテキストエリア）を削除したいと思います。ネットからいくつかのソリューションを合法的に盗もうとしましたが、これを機能させることができません。私は何かひどく間違ったことをしていると確信しています。このコードを見て、正確に何が間違っているかを知るのを手伝ってください。

HTML

<body>
    #parse("inc/Demo.html")
    <div id="parent" class="no-print">

        <div id="content">
            <form>
                <br>
                <div id ="div_Upper">
                    <a href="?add_item=true" class="button_Upper green square">Email Form</a>
                    <a href="?add_item=true" class="button_Upper green square">Save Form</a>
                    <a href="?add_item=true" class="button_Upper green square">Change Form</a>
                    <a href="?add_item=true" class="button_Upper green square">new</a>
                    <a href="http://localhost:8080/servoy-service/velocity/testportaal/Algemeneinformatie.html" type ="button" class ="button_Upper green square">Portal</a>
                </div>

                <div id="div_Form">
                    <div>
                        <div name="question" id="form_List">
                            <br>
                            <input autofocus name="title" type="text"                    
                                id="title" value="Titel" onfocus="
                                    if(this.value==this.defaultValue)this.value='';" onblur="
                                    if(this.value=='')this.value=this.defaultValue;"/>
                        </div> 
                    </div>
                    <div>
                        <div id="form_Content">
                            <br>
                            <textarea name="Content[]" type="text" id="Content[]"
                            onfocus="if(this.value==this.defaultValue)this.value='';"
                            onblur="if(this.value=='')this.value=this.defaultValue;">
                            </textarea>
                        </div>
                        <button id="AddTextarea">Add</button><button id="remove">Remove</button>
                    </div>
                </div>

                <div id="div_Form2">
                    <div id="buttons_Save_Delete_Edit">
                        <a href="?add_item=true"class="button_Edit_Save_Delete red square" type="button">Delete</a>
                        <a href="?add_item=true" class="button_Edit_Save_Delete green square" type="button">Save</a>
                        <a href="?add_item=true" class="button_Edit_Save_Delete green square" type="button">Edit</a>
                    </div>
                    <div>
                        <label>Question type</label>
                        <div id="form_list">
                            <select id="Select">
                                <option value="Text">Text</option>  
                                <option value="Date">Date</option>
                                <option value="Scale">Scale</option>
                                <option value="Tekstarea">Textarea</option>
                                <option value="Checkboxes">Checkboxes</option>
                                <option value="multiple_Choice">Multiple-Choice</option>
                                <option value="Choose from a list">Choose from a list</option>
                                onder require>masker dd,mm,jjjj
                            </select>
                        </div>
                    </div>
                <div>
                    <div id="form_List">
                        <label>Mask</label>
                        <div id="form_list">
                            <select id="Select" >
                                <option value="date">{Date}DD-MM-JJJJ</option>
                                <option value="mobile_number">{M-nummer}__-________</option>  
                                <option value="house_number">{H-nummer}___-_______</option>  
                                <option value="ponskaart nummer">Ponskaart nummer</option>
                                <option value="klanten nummer">Klanten nummer</option>
                            </select>
                        </div> 
                    </div>
                </div>
                <div>
                    <div id="form_List">
                        <label>Question title</label>
                        <input type="text" name="Vraag Titel" id="list" value="..." onfocus="
                            if(this.value==this.defaultValue)this.value='';" onblur="
                            if(this.value=='')this.value=this.defaultValue;"/>
                    </div>
                </div>
                <div>
                    <div id="form_List">
                        <label>Help text</label>
                        <input type="text" name="Help_tekst" id="list" value="..." onfocus="
                            if(this.value==this.defaultValue)this.value='';" onblur="
                            if(this.value=='')this.value=this.defaultValue;"/>
                    </div>
                </div>
                <div>
                    <div id="form_List"> 
                        <label>Required</label>
                        <div id="form_list">
                            <input id="checkboxes"type="checkbox" name="Required" value="Required"/>
                        </div>
                    </div>
                </div>
                #parse("Form/Textarea.html")
                <div>
                    <div id="button_Add_Question">
                        <a href="?add_item=true" class="Add_Question green square" onclick="">+</a>
                    </div>
                </div>

                <div >
                    <button  id="Button_Done" class="buttons_Done green square" type="submit">Done</button>
                </div>
            </div>
            <div>
                <button  id="button_Complete" class="buttons_Complete_Add green square" type="submit">Complete form</button>
            </div>
            </form>
        </div>
        #parse("inc/footer.html")
    </div>
</body>

JS

   $(document).ready(function() {
    $('#AddTextarea').click(function() {
        $clone=$('textarea[name="Content[]"]:first').clone();
        console.log($clone);
        $('#form_Content').append($clone);
        return false;
    });

    $("#remove").click(function(e) {
        $(this).closest('textarea[name="Content[]"]:first').remove();
        e.preventDefault();
    });
});

また、JSFiddleへのリンク: JSFiddle

4

2 に答える 2

2

問題は次の行にあります。

$(this).closest('textarea[name="Content[]"]:first').remove();

それを次のように置き換えます。

$('textarea[name="Content[]"]:last').remove();

このようにして、最後に追加されたテキストエリアが削除されます。

jQuery ドキュメントから: ( http://api.jquery.com/closest/ )

一連の DOM 要素を表す jQuery オブジェクトを指定すると、.closest() メソッドは、これらの要素とその祖先を DOM ツリーで検索し、一致する要素から新しい jQuery オブジェクトを構築します。

あなたの場合、検索するthisため、セットまたは削除ボタンの祖先でテキストエリアを見つけることができません。

更新されたフィドル: http://jsfiddle.net/hcJGk/9/

于 2013-10-17T13:56:46.560 に答える
0

JSFiddle: http://jsfiddle.net/hcJGk/11/

$(document).ready(function() {
    $('#AddTextarea').click(
        function() {
            $clone=$('textarea[name="Content"]:first').clone();
            console.log($clone);
           $('#form_Content').append($clone);
            return false;
    });

    $("#remove").click(function(e) {
        $(this).closest('div').find('textarea[name="Content"]:last').remove();
        e.preventDefault();
    });
});

あなたの例にはいくつかの問題があります。「Content[]」のような名前を使用しないでください。重複した ID がすべてのブラウザーで機能するとは思わないでください (ID を textArea にダンプします)。

にも適用closestし、buttonを見つけることを期待していましたが、要素の親を検索するだけですtextarea。closest

親DIVを見つけて最後のテキストエリアを削除するように例を変更して、同じページにこれらの複数を配置できるようにしました。

于 2013-10-17T13:56:54.597 に答える