點擊另一個按鈕時的實時表刪除按鈕

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();