点击另一个按钮时的实时表删除按钮

Question

我是Jquery的新手，当另一个名为“编辑”的按钮被点击时，我试图删除一个名为“DELETE”的按钮。 我不知道如何处理这个问题，我在StackOverflow中搜索，但我发现只改变静态表中的按钮，而不是像这样的动态。
下面是代码： “（BTN-删除”）。

PHP表

<table> 
    <tr> 
    <th>Nome</th> 
    <th>Cognome</th> 
    <th>Username</th> 
    <th>Email</th> 
    <th>Password</th> 
    <th>Azioni</th> 
    </tr> 
<?php 
    foreach($result as $row){ 
     echo "<tr data-row='{$row['iduser']}'>"; 
     echo "<td data-column='name'>" . $row['name'] . "</td> 
       <td data-column='surname'>" . $row['surname'] . "</td> 
       <td data-column='username'>" . $row['username'] . "</td> 
       <td data-column='email'>" . $row['email'] . "</td> 
       <td data-column='password'>" . $row['password'] . "</td> 
       <td><button type='button' class='btn btn-info'>EDIT</button> 
       <button type='button' class='btn btn-delete'>DELETE</button></td>"; 
     echo "</tr>"; 
    } 
?> 

</table> 

JQuery的 “编辑” 功能

$(function(){ 

    $(document).on("click", ".btn-info", function(){ 

     $(".btn-delete").remove(); 

     var parent = $(this).closest("tr"); 
     var id = $(parent).attr("data-row"); 

     var name = $(parent).children("[data-column='name']"); 
     var surname = $(parent).children("[data-column='surname']"); 
     var username = $(parent).children("[data-column='username']"); 
     var email = $(parent).children("[data-column='email']"); 
     var password = $(parent).children("[data-column='password']"); 

     var nameTxt = $(name).html(); 
     var surnameTxt = $(surname).html(); 
     var usernameTxt = $(username).html(); 
     var emailTxt = $(email).html(); 
     var passwordTxt = $(password).html(); 


     $(name).html("<input name='name' data-dc='name' value='" + nameTxt + "'>"); 
     $(surname).html("<input name='surname' data-dc='surname' value='" + surnameTxt + "'>"); 
     $(username).html("<input name='username' data-dc='username' value='" + usernameTxt + "'>"); 
     $(email).html("<input name='email' data-dc='email' value='" + emailTxt + "'>"); 
     $(password).val('').html("<input name='password' data-dc='password' value='" + passwordTxt + "'>"); 

     $("[data-dc='password']").val(''); 
    }); 
}); 

随着$“ 删除（）“它删除每个”DELETE“按钮里面的现场表。 我需要了解如何使一个工作函数删除相同排按钮“编辑”的 对不起，我的英语按钮“删除”，希望得到理解。告诉我是否必须更清楚。

Answer 1

您必须删除下面的删除按钮尝试使用next()，

$(this).next(".btn-delete").remove(); 

，或者您可以使用closest()像

$(this).closest('td').find(".btn-delete").remove(); 

如果你有parent然后直接使用它像，

parent.find(".btn-delete").remove(); 

此外，您还可以使用html()短代码一样，

$(document).on("click", ".btn-info", function(){ 
    var parent = $(this).closest("tr"); 
    parent.find(".btn-delete").remove(); 

    var id = $(parent).attr("data-row"); 
    //var name = $(parent).children("[data-column='name']"); 
    //var surname = $(parent).children("[data-column='surname']"); 
    //var username = $(parent).children("[data-column='username']"); 
    //var email = $(parent).children("[data-column='email']"); 
    //var password = $(parent).children("[data-column='password']"); 

    //var nameTxt = $(name).html(); 
    //var surnameTxt = $(surname).html(); 
    //var usernameTxt = $(username).html(); 
    //var emailTxt = $(email).html(); 
    //var passwordTxt = $(password).html(); 


    // use html callback 
    name.html(function(){ 
     return "<input name='name' data-dc='name' value='" + $(this).text() + "'>" 
    }); 
    surname.html(function(){ 
     return "<input name='surname' data-dc='surname' value='" + $(this).text() + "'>" 
    }); 
    username.html(function(){ 
     return "<input name='username' data-dc='username' value='" + $(this).text() + "'>" 
    }); 
    email.html(function(){ 
     return "<input name='email' data-dc='email' value='" + $(this).text() + "'>" 
    }); 
    password.html(function(){ 
     return "<input name='password' data-dc='password' value=''>" 
    }); 
}); 

或者更好的办法是，

$(document).on("click", ".btn-info", function(){ 
    var parent = $(this).closest("tr"); 
    parent.find(".btn-delete").remove(); 

    var id = $(parent).attr("data-row"); 
    $('[data-column]').each(function(){ 
     var self = $(this); 
     self.html(function(){ 
      key = self.attr('data-column'); 
      return "<input name='"+key+"' data-dc='"+key+"' value='"+self.text()+"'>" 
     }); 
    }); 
    // need to blank password field here, 
    parent.find("[data-dc='password']").val(''); 
}); 

Answer 2

因为你已经瞄准父TR元素，把它作为背景

$(".btn-delete", parent).remove(); 
//parent.find(".btn-delete").remove();