Search for columns with style display none and remove them

Question

Search for columns with style display none and remove them

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have a table like this:

<table id="mi_tabla">
  <tr>
    <th></th>
    <th style="display: none;"></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td style="display: none;"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td style="display: none;"></td>
    <td></td>
    <td></td>
  </tr>
</table>

and I want to remove those columns that have display none, how can I do it?

Thanks !!

jquery

asked by Mauricio Delgado 03.07.2018 в 18:25

source

2 answers

2

In a single line you can do it with CSS Selectors

In this example that I leave you I select all the elements that have "display none" and then I remove them.

$(document).ready(function(){
  $("#mi_tabla [style*='display: none']").remove()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="mi_tabla">
  <tr>
    <th>1</th>
    <th style="display: none;">2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>1</td>
    <td style="display: none;">2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td style="display: none;">2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

answered by 03.07.2018 в 18:49

Assign a IS NOT NULL condition to a Variable? Display data from two mysql tables in php

score 1 · Accepted Answer

You can use a jQuery selector that searches for items with the display: none style. If you inspect the table, you will see that the elements have been removed:

$(document).ready(function() {
  var th = $("#mi_tabla").find("tr th[style='display: none;']").remove();
  $("#mi_tabla").find("tr td[style='display: none;']").remove();
  $("#append").on("click", function() {
    $("#mi_tabla").find("th:first").after(th);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="mi_tabla">
  <tr>
    <th>1</th>
    <th style="display: none;">2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>1</td>
    <td style="display: none;">2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td style="display: none;">2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<button id="append">Pegar</button>