I want to delete certain <th>
elements that contain the full text "ABC".
For example:
<th class="text-center" width="45">ABC</th>
How do you do without jQuery just using JavaScript?
I want to delete certain <th>
elements that contain the full text "ABC".
For example:
<th class="text-center" width="45">ABC</th>
How do you do without jQuery just using JavaScript?
We must first select all the elements th
using the method of JS getElementsByTagName()
var elementosTH = document.getElementsByTagName('th');
This method will return a collection of all th
elements of the HTML document.
Now we must use a cycle to access each of the elements and find out if it contains the text 'ABC'
we will use the cycle for
, and the property textContent
of each element.
for (var indice = 0; indice < elementosTH.length; indice++) {
var texto = elementosTH[indice].textContent;
if (texto === "ABC") {
// eliminar elemento
}
}
Finally we are going to delete the elements with the text ABC
elementosTH[indice].parentNode.removeChild(elementosTH[indice])
Our code would be as follows
var elementosTH = document.getElementsByTagName('th');
for (var indice = 0; indice < elementosTH.length; indice++) {
var texto = elementosTH[indice].textContent;
if (texto === "ABC") {
elementosTH[indice].parentNode.removeChild(elementosTH[indice]);
}
}
I leave you a code to do it. This commented so that you understand. Greetings!
function deleteTh(param){
// Seleccionamos todaslas etiquetas <th>
var ths = document.querySelectorAll("th");
// "ths" es un array que contiene todas las etiquetas.
// ahora debemos reccorrer dicho array y verificar el contenido de cada uno
ths.forEach(function(item, index, object) {
if (item.textContent === param) {
//Si el contenido coincide con el parametro, borra dicha etiqueta.
ths[index].parentNode.removeChild(ths[index]);
}
});
}
th {
text-align: left;
}
<table style="width:100%">
<tr>
<th>ABC</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<br>
<button onclick="deleteTh('ABC')">Eliminr TH</button>
You can do it in the following way:
function deleteElement(){
/* Obtenemos el valor del input y lo guardamos en la variable */
var inputValue = document.getElementById('delete').value;
var rows = document.querySelectorAll('td'); // Buscamos todos los elementos td
for(var i = 0; i < rows.length; i++){
var row = rows[i];
/* Comprobamos el texto de cada elemento */
if(
row.textContent.toLowerCase()
.indexOf( inputValue.toLowerCase().trim() ) > -1
)
{
/* Llamamos al removedor con el elemento a remover */
removeElement( row );
}
}
}
/* Removedor de elementos */
function removeElement( el ) {
el.parentNode.removeChild(el);
}
td {
margin:5px;
padding:15px;
background:#f0f0f0;
}
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>123</td>
</tr>
</table>
<br>
<form>
<input type="text" id="delete">
<input type="submit" value="Eliminar" onclick="deleteElement(); return false;">
</form>
To get the input value use document.getElementById('delete').value;
.
To get all th use document.getElementById('delete').value;
To know if the text entered in the input is in an element use row.textContent.toLowerCase().indexOf( inputValue.toLowerCase().trim() ) > -1
I get the text inside th with row.textContent
and I convert it to lowercase with toLowerCase()
and I search with .indexOf( value )
where value
is the value of the input ( inputValue
) converted into a minuscule inputValue.toLowerCase()
and remove blanks with .trim()
If there are results, it will give me the number of the position, but if it does not, return -1. That's why I put the > -1
in if
If there are results we pass the element row
, which is the specific element with the corresponding id of the elements rows
which are all <th>
, to the function removeElement( el )
that is responsible for removing the last element in the parameter el
.
In this way we can eliminate elements that in their content I have, regardless of the position, the text written in the input.
For example if we have a th
with text 123
and in the input we eliminate with the number 2
if it will eliminate the th
I hope I answered correctly. Greetings!