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>

​