通过选择表行的单元格

片段之一删除表行：通过选择表行的单元格

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
 
    }); 
 
    $('th').on('click', '#no', function() { 
 
    $(this).remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
    </tr> 
 
    <tr> 
 
    <td id='no'>X</td> 
 
    <td>Example</td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

我想，当我点击该行的X要删除的行。我应该添加哪些代码来执行此操作？

来源

2017-08-30 Lucian cahil

[删除表的可能的复制行后单击表格行删除按钮]（https://stackoverflow.com/questions/11553768/remove-table-row-after-clicking-table-row-delete-button） – Sand

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
     $('table').append("<tr><td onclick='removeRow(this)' id='no'>X</td><td>Example</td></tr>"); 
 
    }); 
 
}); 
 
function removeRow($this){ 
 
     $($this).parent().remove(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
</tr> 
 
<tr> 
 
    <td onclick='removeRow(this);' id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
</tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

来源

2017-08-30 05:15:48

您应该按照事件委派动态创建的HTML元素。检查我已更改的粗体代码。

$(document).ready(function(){ 
    $('button').click(function(){ 
     $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
    }); 
    **$(document)**.on('click', ''th' #no', function(){ 
     **$(this).parent('th:first').remove();** 
    }); 
});

来源

2017-08-30 05:16:53

在这里，你有一个解决方案去https://jsfiddle.net/wfLu3Lzu/

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
     $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
 
    }); 
 
    $('table').on('click', 'tr #no', function(){ 
 
     $(this).closest('tr').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
</tr> 
 
<tr> 
 
    <td id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
</tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

事件代表团应该从table至tr #no

希望这会帮助你。

来源

2017-08-30 05:17:19 Shiladitya

您X按钮在td标记中，并且您试图将事件绑定到th标记上。

能不能请你代替

$('th').on('click', '#no', function(){

这

$(document).ready(function(){ 
    $('button').click(function(){ 
     $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
    }); 
    $('table').on('click', '#no', function(){ 
     $(this).parent().remove(); 
    }); 
});

来源

2017-08-30 05:19:00

您应该使用事件代表团：

$(document).on('click', '#no', function(){

这里是你的工作演示：

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
 
    }); 
 
    $(document).on('click', '#no', function() { 
 
    $(this).parent().remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
    </tr> 
 
    <tr> 
 
    <td id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

来源

2017-08-30 05:20:11

试试这个：

$('tr').on('click', '#no', function(){ 
     $(this).closest('tr').remove(); 
    });

来源

2017-08-30 05:20:34 Rakib

此功能将定位cliacked的TD和删除TR它的归属。

$("td").click(function(){ 
    $(this).closest("tr").remove(); 
});

希望它解决了你的问题。

来源

2017-08-30 05:20:40 jhek

您不断追加具有相同ID的元素，这些元素在绑定事件处理程序后动态插入。

您可以轻松创建的元素，事件处理程序，在当时它的插入，并使用类样式而不是重复的ID

$(document).ready(function() { 
 
    $('#no').on('click', function() { 
 
    $(this).closest('tr').remove(); 
 
    }); 
 
    
 
    $('button').click(function() { 
 
    var tr = $('<tr />'), 
 
     td1 = $('<td />', { 
 
      'class' : 'no', 
 
      text : 'X', 
 
      on : { 
 
      click : function() { 
 
       tr.remove(); 
 
      } 
 
      } 
 
     }), 
 
     td2 = $('<td />', { 
 
      text : 'Example' 
 
     }); 
 
    
 
    $('table').append(tr.append(td1, td2)) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
    </tr> 
 
    <tr> 
 
    <td id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

来源

2017-08-30 05:26:58 adeneo

通过选择表行的单元格

回答

相关问题