Question

我想要删除在页面加载后在运行时创建的表。我使用实时功能删除了相应的表格，但它不起作用请帮助我 can check fiddle here 或查看下面的代码。

SCRIPT

var countTR = 0;
$('.addMore').click(function(e){
    e.preventDefault();
    countTR++
    if(countTR<=4)
    {
    $(this).siblings('div').append('<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="50%"><p>Name </p><input type="text" name="2" id="2"></td><td width="" ><p>Mobile No. </p><input type="text" name=" " id=" "></td></tr><tr><td width="50%"><p>Email ID </p><input type="text" name="2" id="2"></td><td width="" ><p>GV Denomination </p><select name=" 7" ><option>IVR</option><option>SMS</option><option>Email</option></select></td></tr><tr><td width="50%"><p>&nbsp;</p></td><td width="" align="right" ><p><a href="#" class="removeTr">Remove</a></p></td></tr></table>')
    }
    else{alert('Sorry you cant add more')}

    })

    $('.removeTr').live('click',function(){

        alert('clear')
        $(this).parent().parent('table').remove();
    countTR--;
        })

HTML

<div class="addManually othersTable">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="50%"><p>Name </p>
                      <input type="text" name=" 2" id=" 2"></td>
                    <td width="" ><p>Mobile No. </p>
                      <input type="text" name=" " id=" "></td>
                  </tr>
                  <tr>
                    <td width="50%"><p>Email ID </p>
                      <input type="text" name=" 2" id=" 2"></td>
                    <td width="" ><p>GV Denomination </p>
                      <select name=" 7" >
                        <option>IVR</option>
                        <option>SMS</option>
                        <option>Email</option>
                      </select></td>
                  </tr>
                </table>

              </div><a href="#" class="link addMore spacingTop">Add more</a>

Answer 1

您需要event delegation，同时使用closest获取父表而不是多次使用parent（）

<强> Live Demo

$(document).on('click', '.removeTr', function () {
    alert('clear')
    $(this).closest('table').remove();
    countTR--;
});

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序MSDN。

Answer 2

使用事件委派并使用.closest()

$(this).closest('table').remove();

$(document.body).on('click','.removeTr',function(){    
    $(this).closest('table').remove();
});

您正在使用jQuery版本1.10，.live()不再存在，您必须使用.on()

Fiddle

Answer 3

尝试此操作：See fiddle

.live已弃用，您必须使用.on或.on

$(document).on('click','.removeTr',function(){    
    $(this).closest('table').remove();
    countTR--;
})

删除不使用实时函数jQuery

3 个答案: