remove - jQuery eliminar columna de tabla HTML

remove item from table jquery

Question

Tengo una tabla HTML como esta:

<table border="1">
    <tbody>
        <tr>
            <td><a href="#" class="delete">DELETE ROW</a>COL 1</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

Necesito una función para eliminar la columna especificada cuando hago clic en el enlace con la clase "eliminar". Puede usted ayudar ?

Answer 1

Así es como lo haría.

Asigna cada celda en una columna con el mismo nombre de clase. Luego, con jQuery, elimine todas las etiquetas que tengan ese nombre de clase.

Answer 2

Cuando leí esta publicación, probé la primera solución utilizando la función de eliminación de jQuery. Pero parece tener un problema con esta función cuando se usa en una fila de la tabla para eliminar celdas. El problema es vincular a una modificación concurrente. En el ejemplo con esta respuesta, si intenta utilizar la función index (), no funcionará porque el índice de celda cambia cada vez que elimina una celda. Una solución podría ser utilizar la función hide () en la celda que desea eliminar. Pero si realmente necesita eliminar la columna (eliminarla del DOM), la forma en que me ha funcionado fue utilizar el javascript nativo para eliminar la columna.

$(function() {      
    $(''table tr'').each(function(e, row) {
    var i = 0;
    $(row).find(''td, th'').each(function(e, cell) {          
        if (i == 1)  { 
           row.removeChild(cell);  
        }   
        i++;                    
    });
});

En este ejemplo, borra la segunda columna de la tabla: i == 1 ...

Answer 3

Después de unos años, probablemente sea el momento de actualizar la respuesta a esta pregunta.

// Listen for clicks on table originating from .delete element(s)
$("table").on("click", ".delete", function ( event ) {
    // Get index of parent TD among its siblings (add one for nth-child)
    var ndx = $(this).parent().index() + 1;
    // Find all TD elements with the same index
    $("td", event.delegateTarget).remove(":nth-child(" + ndx + ")");
});

Answer 4

Este viejo tema fue superior en google pero da muy malas respuestas. Se perdió mucho tiempo para hacer este trabajo, pero la solución fácil estaría aquí, por ejemplo.

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

  $(document).ready(function() {
        $(''#btnHide'').click(function() {
            $(''td:nth-child(2)'').hide();
            // if your table has header(th), use this
            //$(''td:nth-child(2),th:nth-child(2)'').hide();
        });
    });

Answer 5

La respuesta de @Jonathan Sampson, modifiqué el código para manejar el marcado de la tabla que contenía un elemento <thead> y proporcioné un bonito efecto de fundido:

$(document).ready(function(){
    $("a.delete").live("click", function(){
    /* Better index-calculation from @activa */
    var myIndex = $(this).closest("th").prevAll("th").length;
    $(this).parents("table").find("tr").each(function(){
      $(this).find("td:eq("+myIndex+"), th:eq("+myIndex+")").fadeOut(''slow'', function() {
        $(this).remove();
        fixTitles();
      });
    });
  });
});
function fixTitles() {
  $("tr:eq(0) td").each(function(a){
    $(this).html("<a href=''#'' class=''delete''>Delete Row</a> COL " + (a+1));
  });
}

Answer 6

Prueba esto, tengo la salida exacta

var colnum = $(e.target).closest("td").length;
$(e.target).closest("table").find("tr").each(function(){ 
$(this).find("td:eq(" + colnum + ")").remove()});

Answer 7

Prueba esto:

    $("a.delete").click(function(){
        var td=$(this).parent();
        var col=$(td).text();
        col=col.substring(col.length-2)*1;
        var f="td:nth-child("+col+")";
        var tbl=$(td).parent().parent();

        $(tbl).find("tr").each(function(){
            $(this).find(f).hide();
        });

Probado en FF3.5.

Hay una preocupación a pesar de obtener el número de columna. Si el número de columnas excede 2 dígitos, no funcionará. Sería mejor si coloca un atributo personalizado y le asigna la posición de columna.

   <a class="delete" href="#" col="2">...</a>

recuerde con el índice nth-child comienza en 1

Answer 8

Realmente no me gustó ninguna de las soluciones de este post, así que se me ocurrió la mía. Idealmente, lo que se necesita es: selector de nth-of-type que haría las cosas más fáciles. Pero, lamentablemente, JQuery no lo admite "debido a su falta de utilidad en el mundo real". Ehh ..

Así que aquí está mi solución que hace el truco usando: nth-child expresión:

$("a.delete").click(function(event) {
   event.preventDefault();

   var current_cell = $(this).closest("td");
   var nb_columns = current_cell.closest(''table'').find(''tr:eq(1) td'').length+1;
   var column_to_delete = current_cell.prevAll("td").length+1;

   $(''table tr td:nth-child(''+(nb_columns+''n-''+(nb_columns-column_to_delete))+'')'').remove();
});

Answer 9

Sé que el tema es antiguo, pero creo que la forma más sencilla es ponerlo: $ (". Delete"). Remove ();

abrazos.

Zanoldor

Answer 10

Una forma genérica (no probada):

$("a.delete").click(function() {
   var colnum = $(this).closest("td").prevAll("td").length;

   $(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove();
}

No hay necesidad de cambiar el marcado.

Answer 11

jQuery:

   $(''.delete'').click(function() {
       var colNumber = $(this).parents().find(''td'').attr(''col'');
       $(''td[col=''+colNumber+'']'').remove();
       return false;
    });

HTML:

<table border="1">
    <tbody>
    <tr>
                <td col=''1''><a href="#" class="delete">DELETE COL</a>COL 1</td>
                <td col=''2''><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td col=''3''><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td col=''4''><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td col=''5''><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td col=''6''><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
                <td col=''1''>ROW 1</td>
                <td col=''2''>ROW 1</td>
            <td col=''3''>ROW 1</td>
            <td col=''4''>ROW 1</td>
            <td col=''5''>ROW 1</td>
            <td col=''6''>ROW 1</td>
        </tr>
        <tr>
                <td col=''1''>ROW 2</td>
                <td col=''2''>ROW 2</td>
            <td col=''3''>ROW 2</td>
            <td col=''4''>ROW 2</td>
            <td col=''5''>ROW 2</td>
            <td col=''6''>ROW 2</td>
        </tr>
    </tbody>
</table>