使用javascript或jquery刪除html表行？

Question

我的html表單中有一個動態表，它具有添加/刪除行的功能。 每個元素的名稱都附加一個數字，指定行號（例如ID.0，ID.1等）。 我編寫了這個函數來嘗試刪除每一行以及更新每個元素的名稱：

function remove() {

    var theName=getItemNames();
    var counter=theName.length;
    var index=0;

    f.preventDefault();
    $(this).parents("tr").remove();
    counter--;

    $('input[name*="Id."]').each(function()   {

        $(this).attr("name", "Id."+index);
        index++;
    });
    $('input[name*="Date."]').each(function()   {

        $(this).attr("name", "Date."+index);
        index++;
    });
    $('input[name*="Value."]').each(function()   {

        $(this).attr("name", "Value."+index);
        index++;
    });
    $('input[name*="Required."]').each(function()   {

        $(this).attr("name", "Required."+index);
        index++;
    });

}

但是，這只刪除了刪除按鈕而不是我預期的整行。 誰能看到我做錯了什么？

Answer 1

假設你的表看起來像這樣

<table>
    <tbody>
        <tr>
            <td></td>
            <td>col2</td>
            <td><input type="button" name="x" value="x" /></td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" name="x" value="x" /></td>
        </tr>
    </tbody>
</table>

只是用

$("input.btn" ).click(function(event) {
    $(this).parent().parent().remove();
});

要么

 $( "input.btn" ).click(function(event) {
        $(this).closest("tr").remove();
    });

正如你正在做的那樣是去tr的父母，然后尋找一個tr

如果你的表是由javascript呈現的，你可能還需要更改你的點擊

$("input.btn" ).on(click, function(){
     $(this).closest("tr").remove();
}); 

Answer 2

這里的問題是你已經命名了函數remove ，它根本不會觸發你的函數。 它會觸發內部remove功能，因此按鈕會被刪除。

嘗試將該函數重命名為removeIt或尚未存在的函數。 然后你可以使它工作。

此外，每當您嘗試調用removeIt時，請執行以下操作： onclick="removeIt(this)"並像removeIt(elem)一樣捕獲它。

現在你可以做一個$(elem).parents('tr').remove() :)

工作范例這里 。

干杯!

Answer 3

嘗試使用closest('tr').remove()

Answer 4

嘗試這個

使用Javascript

$(document).ready(function(){
$(".showaction").tipsy({gravity:'e'});

$(".deletenews") .click(function(){
var id_news = $(this).attr('rel');

var s = {
"id_news":id_news
}
$.ajax({
url:'delete_news.php',
type:'POST',
data:s,
beforeSend: function (){
        $(".loading[rel="+id_news+"]") .html("<img src=\"style/img/add.gif\" alt=\"Loading ....\" />");
        },
success:function(data){
$("tr[rel="+id_news+"]") .hide();
}
});
return false;
});




});

PHP

<table align="center" width="80%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="td3">
news
</td>
</tr>
<tr>
    <td width="70%" class="td1">
title
    </td>
    <td width="20%" class="td1">

編輯/刪除

 <?
    $select2 = $mysqli->query("SELECT * FROM news ORDER BY id  DESC LIMIT  20 ");
    $num2 = $select2->num_rows;
    while ($rows2 = $select2->fetch_array(MYSQL_ASSOC)){

$id_news2       = $rows2 ['id'];
$title_news2       = $rows2 ['title'];
$pic_news2       = $rows2 ['pic'];
$news_news2       = $rows2 ['news'];
?>
<tr rel="<? echo $id_news2; ?>">
    <td width="70%" class="td1">
<? echo $title_news2;  ?>
    </td>
    <td width="20%" class="td1">
<a href="edit_news.php?id=<? echo $id_news2; ?>"><img src="style/img/edit.gif" class="showaction" title="Edit" /></a> / <a rel="<? echo $id_news2; ?>" class="deletenews" href="#"><img src="style/img/del.gif" class="showaction" title="remove" /></a>
<span class="loading" rel="<? echo $id_news2; ?>"></span>
    </td>
</tr>
<tr>
<?
}
?>
</table>