Javascript / Jquery - Means to remove the contents of a <TD>

Asked

Viewed 829 times

0

How can I remove content from a td, for example this code:

<table id="tblItens" width="400px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<button> teste </button>

What medium in js can I use to remove TD elements?

javascript html5
  • 1

    You want to remove the contents of the <td> from the iteration of a button, a click? would explain better , or to which the example applies?

  • Yes, through an onclick of the button

  • 1

    There are 3 tds. Which td you want to remove?

  • I wonder what are the ways to remove the content of both a td and all

  • 1

    @Sora Please be a little more specific. You need to remove a td within a tr, right? But what is the criterion for this? Or do you just want to know which function you can use to remove it?

  • I would like to know only which function can remove both an element and all elements of tds within this table @LINQ

Show 1 more comment

4 answers

4


To remove individually simply assign a Trigger to each td, and pick them up with the this.

let td = document.querySelectorAll('td');

for(item in td)
  td[item].onclick = function(){ this.parentNode.removeChild(this); }
<table id="tblItens" width="400px">
    	<tr>
    		<td>1</td>
    		<td>2</td>
    		<td>3</td>
    	</tr>
    </table>
<span>Clique na td para remove-la<span>

To remove all just go through and remove them by clicking the button.

let td = document.querySelectorAll('td');
let apagar = document.querySelector('#apagar');

apagar.onclick = function(){
  for(item in td) 
  if(td[item].parentNode) td[item].parentNode.removeChild(td[item]);
}
<table id="tblItens" width="400px">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>
<button id="apagar"> apagar </button>

  • 1

    Perfect, I’ll study the code to understand how to proceed

  • 1

    Thanks @Felipe

  • 1

    Denada @Sora, in the second code was giving an error in the console if parentNode did not exist, but I have arranged and edited :)

1

From what I understand you just want to know how to delete any element of the DOM.

Well, being elemento the element you want to remove, it is possible to do the following

elemento.parentNode.removeChild(elemento);

Take an example:

document.getElementById('bt').addEventListener('click', function() {
  const id = document.getElementById('txtrem').value;
  const el = document.getElementById(id);
  el.parentNode.removeChild(el);
});
<table id="tblItens" width="400px">
  <tr>
    <td id="td1">1</td>
    <td id="td1">2</td>
    <td id="td1">3</td>
  </tr>
</table>

<label>Digite o Id que deseja remover</label><br>
<input type="text" id="txtrem">
<button id="bt"> teste </button>

  • Perfect, to remove all elements it is necessary a be sure?

  • 1

    @Sora Then you better do it innerHtml = ''. This will clear all content within an element.

  • Oh yes, thanks for the help @LINQ

1

To remove child elements from <td>s, use the method empty() jQuery, or pure javascript would suffice something like elementoTd.innerHTML = '';.

1

Remove content from all tds:

botao = document.querySelector("button");
botao.addEventListener("click", function(){
   var tabela = document.querySelector("#tblItens");
   var TDs = tabela.getElementsByTagName("td");
   for(idx in TDs){
      TDs[idx].innerHTML = '';
   }
});
<table id="tblItens" width="400px">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>
<button> Remover tudo </button>

Remove by the contents of a td:

botao = document.querySelector("button");
botao.addEventListener("click", function(){
   var conteudo = "2"; // exemplo, td que tiver "2"
   var tabela = document.querySelector("#tblItens");
   var TDs = tabela.getElementsByTagName("td");
   for(idx in TDs){
      if(TDs[idx].innerHTML == conteudo){
         TDs[idx].innerHTML = "";
      }
   }
});
<table id="tblItens" width="400px">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>
<button> Remover pelo conteúdo </button>

  • 1

    Perfect !! I will study this template because I believe it will be what I will need to use in the future, thanks @Dvd

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.