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>