如何使用JS动态删除表中a的内容

Question

我希望当用户单击类别名称为“ removeElement” 的按钮时，下一个类别为“ forRemove” 的“ td” 删除其内容。 我该怎么办？

scores

Answer 1

您的问题的解决方案在这里。

 $('.removeElement').click(function(e){
         $(this).parent().next().remove();
 });

我也为您制作小提琴。 结帐this

Answer 2

   	<table class="table">
  <tbody class="list" id="list">
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button> 
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
  </tbody>
</table>
<script>
   const buttons = document.getElementsByClassName('removeElement');
   for(let i =0; i < buttons.length; ++i) {
	   buttons[i].onclick = function(event) {
		  const parent = event.currentTarget.parentNode.parentNode;
		  parent.children[parent.children.length - 1].innerHTML = "";
	   }
   }
</script>

这或多或少是您要找的东西？老实说，我不会访问这样的表元素，这对于这种简单的功能做了很多工作，例如，在按钮上，我将在类名或ID的末尾添加一个索引器，而我将ID用于在这种情况下，这不仅是因为速度更快，而且还因为您希望更快地访问这些元素，而不必麻烦地遍历那么多节点。即：

   	<table class="table">
  <tbody class="list" id="list">
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button id="removeElement-0" class="removeElement">removeNextTd</button> 
      </td>
      <td class="forRemove-0">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button id="removeElement-1" class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove-1">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button id="removeElement-2" class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove-2">BODY 4</td>
    </tr>
  </tbody>
</table>
<script>
   const buttons = document.getElementsByClassName('removeElement');
   for(let i =0; i < buttons.length; ++i) {
	   buttons[i].onclick = function(event) {
		 document.getElementsByClassName("forRemove-"+event.currentTarget.id[event.currentTarget.id.length-1])[0].innerHTML = "";
	   }
   }
</script>

但是无论如何，您的伴侣。

Answer 3

这将删除类为forRemove的下一个TD的内容

    $(".removeElement").on("click", function() {
        $(this).closest("tr").find(".forRemove").empty();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table">
  <tbody class="list" id="list">
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button> 
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
  </tbody>
</table>

简而言之，当您单击按钮时，它将通过遍历DOM树找到最近的tr元素，然后使用类forRemove和{{1 }}。

Answer 4

这将清除td。它仍然在那里，所以桌子不会刹车，但是很空。

$('.removeElement').on('click', function() {
  $(this).closest('tr').find('.forRemove').empty();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody class="list" id="list">
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button> 
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
    <tr>
      <td>BODY 1</td>
      <td>BODY 2</td>
      <td>
        <button class="removeElement">removeNextTd</button>
      </td>
      <td class="forRemove">BODY 4</td>
    </tr>
  </tbody>
</table>

Answer 5

并非完全是您的要求，但是您可以使用jquery这样操作

$this .parent()
      .parent()
      .remove();

由于删除按钮位于您要删除的行中，因此应该可以使用