Как динамически удалить содержимое таблицы <td>в таблице с помощью JS

Question

Я хочу, когда пользователь нажимает кнопку с именем класса "removeElement" следующее "td" с классом "forRemove" должно иметь свое содержимое удален. Как я могу это сделать?

<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 1

   	<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>

Это более или менее то, что вы ищете? Честно говоря, я бы не стал обращаться к таким элементам таблицы, это очень много для такой простой функциональности, например, для кнопок, которые я бы добавил индексатором в конце имени класса или идентификатора, я бы использовал идентификаторы для в этом случае не только потому, что это быстрее, но и потому, что вам нужен более быстрый доступ к этим элементам без необходимости проходить через множество узлов. i.e.:

   	<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 2

Решение вашей проблемы здесь.

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

Кроме того, я создаю скрипку для вас. оформить заказ это

Answer 3

Это очищает тд. Он все еще там, поэтому стол не будет тормозить, но он пуст.

$('.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 4

не совсем то, что вы просили, но вы можете сделать это так с помощью jquery

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

, так как кнопка удаления находится внутри строки, которую вы хотите удалить, это должно сработать

Answer 5

Это удалит содержимое следующего TD с классом forRemove

    $(".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>

Короче говоря, когда вы нажимаете кнопку, она находит ближайший элемент tr, пройдя по дереву DOM, а затем находит в нем элемент с классом forRemove, а затем empty() it.