Question

我是Jquery的新手，我试图删除名为＆＃34; DELETE＆＃34;的按钮。当点击另一个名为＆＃34; EDIT＆＃34;的按钮时。我不知道如何处理这个问题，我在StackOverflow中搜索，但我发现只更改静态表中的按钮，而不是像这样的动态。
这是代码：

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＆＃34; EDIT＆＃34;功能

$(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('');
    });
});

使用＆＃34; $（＆＃34; .btn-delete＆＃34;）。remove（）＆＃34;它会删除实时表格中的每个＆＃34; DELETE＆＃34; 按钮。我需要了解如何创建一个工作函数来删除按钮＆＃34; EDIT＆的相同行按钮＆＃34; DELETE＆＃34; ＃34; 对不起我的英语，希望得到理解。告诉我是否必须更清楚。

Answer 1

由于您已经定位了父TR元素，因此请将其用作上下文

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

Answer 2

您必须删除下一个删除按钮才能尝试使用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('');
});

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

2 个答案: