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?
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?
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>
Perfect, I’ll study the code to understand how to proceed
Thanks @Felipe
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?
@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>
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.
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?
– Felipe
Yes, through an onclick of the button
– Sora
There are 3 tds. Which td you want to remove?
– Sam
I wonder what are the ways to remove the content of both a td and all
– Sora
@Sora Please be a little more specific. You need to remove a
td
within atr
, right? But what is the criterion for this? Or do you just want to know which function you can use to remove it?– Jéf Bueno
I would like to know only which function can remove both an element and all elements of
tds
within this table @LINQ– Sora