1

几天前，我提出了一个关于克隆 HTML 元素的问题。我让 JQuery 函数工作，但如果用户需要，我也希望删除元素（在本例中为 textarea）。我试图从网上合法地窃取几个解决方案，但我无法让它发挥作用。我确定我做错了什么。请查看这段代码以尝试帮助我了解究竟是什么不正确。

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，然后删除最后一个 textarea，以便您可以在同一页面上拥有多个这些。

于 2013-10-17T13:56:54.597 回答