jquery克隆和删除div [英] Jquery clone and remove div

问题描述

我已经实现了jquery clone并删除。当点击添加按钮时，一个 DIV A 会被克隆并插入到另一个 DIV B 中。在 DIV A 中，有一个隐藏表单按钮 REMOVE 。现在我需要在单击ADD按钮时仅在克隆中启用REMOVE按钮。即;我想保持 DIV A 中的表单元素始终隐藏。

这是我的代码。

 < div class =ruleid =rule> 
< div class =fm-req> 
< select name =rulefieldid =rulefield> 
< option value =>选择< / option> 
< / select> 
< / div> 
< div class =fm-opt> 
< input type =buttonclass ='remove'value = - style =display：none;/> 
< / div> 
< / div> 
< div class =fm-rulebutton> 
< input type =buttonid =addButtonclass ='add'value =+/> 
< / div> 
 
< div id ='TextBoxesGroup'class =group> 
  

here

Div'rule'被克隆到 Div'TextBoxesGroup '

  $（document）.ready （function（）{
 var id = 0; 
 $（'。add'）。click（function（）{
 id ++; 
 $（'。fm-opt' ）.children（'。remove'）。show（）; 
 var prot = $（document）.find（。rule）。clone（）; 
 prot.attr（class， 'rule'+ id）
 prot.find（。id）。attr（value，id）; 
 
 $（document）.find（div .group） .append（prot）; 
}）; 
 
 $ b $（'。remove'）。live（click，function（）{
 $（this ）.closest（＃rule）。remove（）; 
}）; 
}）; 
  

解决方案

问题在于你正在为所有删除按钮调用 .show（）。您需要将其限制为仅限新的克隆元素。像这样：

  $（'。add'）。click（function（）{
 id ++; $ b $ （）;} $ {$} $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $'$ ）.attr（value，id）; 
 prot.find（'input.remove'）。show（）; //<  - 这是重要部分
 
 $（document）.find（div .group）。append（prot）; 
}）; 
  

这段代码现在只会调用 .show（）在新克隆的元素
中找到的删除按钮上

I have implemented jquery clone and remove. When ADD button is clicked a DIV A with certain form elements are cloned and inserted into another DIV B. In DIV A there is a hidden form button REMOVE. Now I require to enable the REMOVE button only in the clones when ADD button is clicked. i.e; I want to keep the form element in DIV A always hidden.

This is my code.

<div class="rule" id="rule">                        
            <div class="fm-req">
                <select name="rulefield" id="rulefield">
                    <option value="">select</option>
                </select>
            </div>
            <div class="fm-opt" >
                <input type="button" class='remove' value="-" style="display:none;"/>
            </div>
        </div>                  
    <div class="fm-rulebutton">
        <input type="button" id="addButton "class='add' value="+"/>
    </div>

        <div id='TextBoxesGroup' class="group">

here Div 'rule' is cloned into Div 'TextBoxesGroup'

$(document).ready(function() {
    var id = 0;
    $('.add').click(function(){
            id++;
            $('.fm-opt').children('.remove').show();
            var prot = $(document).find(".rule").clone();
            prot.attr("class", 'rule'+id)
            prot.find(".id").attr("value", id);

            $(document).find("div .group").append(prot);
    });        


    $('.remove').live("click", function(){
            $(this).closest("#rule").remove();
    });
});

解决方案

The problem is you are calling .show() for all remove buttons. You need to limit it to only the new clone element. Like so:

$('.add').click(function(){
    id++;
    var prot = $(document).find(".rule").clone();
    prot.attr("class", 'rule'+id)
    prot.find(".id").attr("value", id);
    prot.find('input.remove').show();//<-- this is the important part

    $(document).find("div .group").append(prot);
});  

This code will now only call .show() on the remove button that is found within the newly cloned element

这篇关于jquery克隆和删除div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！