jQuery-替換上一個父元素

Question

我在下表上使用jquery：

 targetButton = $(".btn.btn-danger.btn-sm.motherboard") let targetButtonParent = targetButton[0].parentElement targetButtonParent.remove() targetButtonParent.insertAdjacentHTML('beforebegin', ` <td> <img src="" alt="" height="42" width="42"> <a href="">Awesome title to replace!</a> </td> `) targetButton.attr('class', 'btn btn-danger btn-sm motherboard'); // change button class to red targetButton.text(function() { return $(this).text().replace("Add", "Edit"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table style="float: left;" class="table table-bordered"> <tbody> <tr> <td>CPU</td> <td> <button type="button" data-exists="cpu" class="btn btn-primary btn-sm cpu">Add CPU</button> </td> </tr> <tr> <td>Motherboard</td> <td> <img src="//img.jpeg" height="42" width="42"> <a href="www.link.com">Test Title</a> </td> <td> <button type="button" data-exists="motherboard" class="btn btn-danger btn-sm motherboard">Edit Motherboard</button> </td> </tr> <tr> <td>Graphic Card</td> <td> <button type="button" data-exists="graphic-card" class="btn btn-primary btn-sm graphic-card">Add Graphic Card</button> </td> </tr> <tr> <td>Power Supply&nbsp;</td> <td> <button type="button" data-exists="power-supply" class="btn btn-primary btn-sm power-supply">Add Power Supply</button> </td> </tr> </tr> </tbody> </table> 

如您所見，我的代碼替換了button元素。 相反，我想替換我的html表的內部列。 我正在尋找一種實現以下輸出的方法：

jQuery中是否有辦法替換以前的父元素？

有什么建議我做錯了嗎？

Answer 1

targetButtonParent.remove()刪除了父元素，因此targetButtonParent.insertAdjacentHTML將無法找到父元素。 看來您要刪除targetButton

 targetButton = $(".btn.btn-danger.btn-sm.motherboard") let targetButtonParent = targetButton[0].parentElement; targetButton.remove(); //targetButtonParent.remove() targetButtonParent.insertAdjacentHTML('beforebegin', ` <td> <img src="" alt="" height="42" width="42"> <a href=""> Awesome title to replace! </a> </td> `) targetButton.attr('class', 'btn btn-danger btn-sm motherboard'); // change button class to red targetButton.text(function() { return $(this).text().replace("Add", "Edit"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table style="float: left;" class="table table-bordered"> <tbody> <tr> <td>CPU</td> <td> <button type="button" data-exists="cpu" class="btn btn-primary btn-sm cpu">Add CPU</button> </td> </tr> <tr> <td>Motherboard</td> <td> <img src="//img.jpeg" height="42" width="42"> <a href="www.link.com">Test Title</a> </td> <td> <button type="button" data-exists="motherboard" class="btn btn-danger btn-sm motherboard">Edit Motherboard</button> </td> </tr> <tr> <td>Graphic Card</td> <td> <button type="button" data-exists="graphic-card" class="btn btn-primary btn-sm graphic-card">Add Graphic Card</button> </td> </tr> <tr> <td>Power Supply&nbsp;</td> <td> <button type="button" data-exists="power-supply" class="btn btn-primary btn-sm power-supply">Add Power Supply</button> </td> </tr> </tbody> </table> 

Answer 2

從您發布的圖像看來，您似乎要替換“編輯主板”按鈕的上一個單元格的內容。 您需要選擇需要替換其內容的元素。

targetButton = $(".btn.btn-danger.btn-sm.motherboard")

let elementToBeModified = targetButton.closest('tr').find('td:nth-child(2)');
elementToBeModified.empty();

elementToBeModified.html(`
                <td>    
                   <img src="" alt="" height="42" width="42">
                    <a href="">
                        Awesome title to replace!
                    </a>
                </td>    
            `);

Answer 3

targetButton[0].parentElement是包裝按鈕的<td> ，因此您選擇了錯誤的目標。

targetButton[0].parentElement.previousElementSibling這是目標

<td>
    <img src="//img.jpeg" height="42" width="42">
    <a href="www.link.com">Test Title</a>
</td>

這是您要替換的正確目標。

並且， insertAdjacentHTML將插入

<td>    
    <img src="" alt="" height="42" width="42">
    <a href="">Awesome title to replace!</a>
</td> 

之后。 因此，您必須在插入后刪除目標，否則，它將引發錯誤，指出該元素沒有父節點，因為您已經刪除了它。

 targetButton = $(".btn.btn-danger.btn-sm.motherboard") let targetButtonParent = targetButton[0].parentElement.previousElementSibling targetButtonParent.insertAdjacentHTML('beforebegin', ` <td> <img src="" alt="" height="42" width="42"> <a href=""> Awesome title to replace! </a> </td> `) targetButtonParent.remove() targetButton.attr('class', 'btn btn-danger btn-sm motherboard'); // change button class to red targetButton.text(function() { return $(this).text().replace("Add", "Edit"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table style="float: left;" class="table table-bordered"> <tbody> <tr> <td>CPU</td> <td> <button type="button" data-exists="cpu" class="btn btn-primary btn-sm cpu">Add CPU</button> </td> </tr> <tr> <td>Motherboard</td> <td> <img src="//img.jpeg" height="42" width="42"> <a href="www.link.com">Test Title</a> </td> <td> <button type="button" data-exists="motherboard" class="btn btn-danger btn-sm motherboard">Edit Motherboard</button> </td> </tr> <tr> <td>Graphic Card</td> <td> <button type="button" data-exists="graphic-card" class="btn btn-primary btn-sm graphic-card">Add Graphic Card</button> </td> </tr> <tr> <td>Power Supply&nbsp;</td> <td> <button type="button" data-exists="power-supply" class="btn btn-primary btn-sm power-supply">Add Power Supply</button> </td> </tr> </tbody> </table>