JQuery - Replace previous parent`s element

Question

I am using jquery on the following table:

 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> 

As you can see, my code replaces the button element. Instead I would like to replace the inner column of my html table. I am looking for a way to achieve the following output:

Is there a way in jquery to replace the previous parent`s element?

Any suggestions what I am doing wrong?

Answer 1

targetButtonParent.remove() is removing the parent element so targetButtonParent.insertAdjacentHTML will not able to find the parent element. It seems you want to remove the 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

From the image that you have posted, it seems like you want to replace the content of the previous cell of the Edit Motherboard button. You need to select the element whose content needs to be replaced.

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 is the <td> that wrapping the button, so you selected the wrong target.

targetButton[0].parentElement.previousElementSibling this is target to

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

which is the right target that you're going to replace.

And, insertAdjacentHTML will insert

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

after it. So you have to remove the target after insert, otherwise, it will throw an error saying that there's no parent node of this element cause you have already removed it.

 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>