克隆tr并删除克隆的tr

时间:2013-01-28 05:55:24

标签: jquery html

我在删除克隆的tr时遇到问题..我的克隆功能工作正常,但每当我试图在右侧添加删除按钮时,就会发生..请帮帮我

jQuery:

$(".addjob").click(function(){
        var $clone = $('table.tbll tr.cloneme:first').clone();
         console.log($clone);
         $clone.append("<td><div class='rmv' >Remove</div></td>");
         $('table.tbll').append($clone);    
 });

        $(".rmv").click(function(){
            alert("wee");
           // $(this).parents('td').remove();
        });

HTML:

<table cellspacing="10" class="tbll" >
<tr>
<td>Choose Sub Heading</td><td><select name="subheading_id" style="min-width:145Px">
            <option value="1" Sub heading Me</option>
            <option value="2" Sub heading Me 2</option>     
    </select></td><td>&nbsp;</td>
</tr>
<tr classs="cloneme">
<td>Choose Job Title</td><td><select name="jobtitles_id" style="min-width:145Px"><?php
            <option value="a" >A</option>   
            <option value="b" >B</option>   
            <option value="c" >C</option>       
                    <option value="none" >None</option> 
    </select></td>
</tr>
<tr>
<td><div class="addjob" >Add another Job Title</div></td>
</tr>
</table>

请帮帮我。我不知道该怎么做

提前致谢..

2 个答案:

答案 0 :(得分:0)

您的移除点击功能不适用于动态添加的元素。你必须使用jquery .on

$('body').on('click', '.rmv',function(){
    alert("wee");
    $(this).closest('tr').remove();
});

此外,您仍然需要classs克隆,将其更正为class

这是一个工作小提琴:http://jsfiddle.net/7Z5kt/

编辑:我已将您的.parents('td')更改为.closest('tr'),假设您要删除整行。请相应更改。

注意:.closest有助于在层次结构中找到所需的元素,并帮助您避免.parents()返回的元素

编辑2:这是一个使用.live在jquery 1.7之前使用的版本

$('.rmv').live('click', function(){
    alert("wee");
    $(this).closest('tr').remove();
});

答案 1 :(得分:0)

您只需要一个事件委托: http://jsfiddle.net/h9pH5/

$(".addjob").click(function () {
   var $clone = $('table.tbll tr.cloneme:first').clone();
   console.log($clone);
   $clone.append("<td><div class='rmv' >Remove</div></td>");
   $('table.tbll').append($clone);
});

$('.tbll').on('click', '.rmv', function () {
   alert("wee");
   $(this).closest('tr').remove();
});

并且在您的HTML中,您在

中有多个s
`<tr classs="cloneme">`
      //--^---here