How can I remove the contents of 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 is the medium in js that I can use to remove TD elements?
To remove individually you just have to assign a trigger to every td , and get them with 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 all of them 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>I understand you just want to know how to delete any element of the DOM.
Well, being elemento the element you want to remove, you can do the following
elemento.parentNode.removeChild(elemento);
See 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> To remove child elements from <td> s, use the empty() method in jQuery, or with pure javascript something like elementoTd.innerHTML = ''; would suffice.
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 contents of 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>