Delete elements by their JavaScript text content

0

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?

    
asked by Daniel Martinez 28.10.2018 в 17:21
source

3 answers

0

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]);
    }
}
    
answered by 28.10.2018 / 17:42
source
0

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>
    
answered by 28.10.2018 в 17:48
0

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!

    
answered by 28.10.2018 в 18:24