Remover linha do html jquery

10 de agosto de 2012 14 respostas

junaooaks 10 de agosto de 2012

ola pessoal

segui um post e conseguir fazer para acrescentar linha na tabela
so que preciso colocar um botao para diminuir esta linha
estou tentando usar o remove() do jquery, nao estou conseguindo
segue o script

// JavaScript Document
$(function(){
	
	$('#mais').click(function(){
		
		var next = $('#lista tbody').children('tr').length + 1;
		
		$('#lista tbody').append('<tr id="remover'+next+'">' + 
        	'<td><input type="text" name="item' + next + '" size="70" class="effect" onkeyup="up(this)" /></td>' + 
            '<td><input type="text" name="quantidade' + next + '" size="5" class="effect" onkeyup="up(this)"/></td>' +
         '<td><input type="text" name="uni' + next + '" size="8" class="effect" onkeyup="up(this)" /></td>' +
       '<td><input type="text" name="custo' + next + '" size="5" class="effect" onkeyup="up(this)"/></td>' +

//remover linha da tabela
       '<td align="center" id="menos'+ next +'"><a href="#" onclick ="$("tr").remove("remover'+next+'");"><img src="resources/images/menos.png" border="0"/></a></td>'+
       '</tr>');
		
		$(':hidden').val(next);
                
                
		return false;
	});
        
        
        
        $('form').submit(function(){
		
		var parametros = $(this).serialize();
		
		$.get(
			$(this).attr('action'),
			parametros,
			function(data){
				$('#resultado').empty().append(data);
			},
			"html"
		)
		
		return false;
		
	});
	
	$('#enviar').click(function(){
		$('form').submit();
	});
	
	$(':text').live('focus',function(){
		$(this).closest('tr').addClass('input-focus');
	}).live('blur',function(){
		$(this).closest('tr').removeClass();
	});
        
        $("#menos").click(function(){
                        if($("tr").length == 1){
                                   alert("nao e possível remover todas as combos")
                        }else{
                                   $("tr:last").remove();
                        }
            });

});

14 Respostas

davidbuzatto 10 de ago. de 2012

Você quer remover a última ou uma linha específica?

junaooaks 10 de ago. de 2012

quero remover a linha pertencente ao botão que foi clicado

ou seja pode ser o ultimo ou pode ser qual quer um que esta na tabela

claudsan 10 de ago. de 2012

tenta no onclick:

$(this).parent().parent().remove();

junaooaks 10 de ago. de 2012

claudsan

so removeu a coluna da tabela
preciso remover a linha toda

davidbuzatto 10 de ago. de 2012

Para uma tabela com id "tabela", um exemplo seria:

var $tabela = $( "#tabela" );

for ( var i = 0; i < 10; i++ ) {
    
    $tabela.append(
        $( "<tr></tr>" ).append(
            $("<td>Linha " + i + "</td>").append(
                $( "<button type='button'>Remover!</button>" ).click(function(){
                    $(this).parent().parent().remove();
                })
            )
        )
    );
    
}

Veja aqui: http://jsfiddle.net/davidbuzatto/FyEkK/

claudsan 10 de ago. de 2012

junaooaks:
claudsan

so removeu a coluna da tabela
preciso remover a linha toda

Eu editei e coloquei com parent().parent() ai você navega no DOM o primeiro te volta para o TD e o seguinte te leva para o TR removendo a linha completa.

junaooaks 10 de ago. de 2012

claudsan

cara d+ :lol:

so uma coisa sem muita importância

quando removo a linha, ela joga a pagina para cima tirando do foco

tipo

iserir varios itens, deu barra de rolagem quando eu removo uma linha esta ação joga a pagina para o topo

tem como fazer ficar no mesmo lugar ? :oops: sabe qual método pra pesquisar agradeço

Beto_Sagaz 10 de ago. de 2012

Vc quer remover pelo ID, então coloque o cerquilha no seletor:

//$("tr").remove("remover'+next+'"); $("tr").remove("#remover'+next+'");
Apesar que dentro de um loop acho essa tecnica delegante, neh Sandra Annemberg?

Eu faria dessa forma:

junaooaks 10 de ago. de 2012

Beto Sagaz

desta forma que você colocou não funciona

claudsan 10 de ago. de 2012

junaooaks:
claudsan

cara d+ :lol:

so uma coisa sem muita importância

quando removo a linha, ela joga a pagina para cima tirando do foco

tipo

iserir varios itens, deu barra de rolagem quando eu removo uma linha esta ação joga a pagina para o topo

tem como fazer ficar no mesmo lugar ? :oops: sabe qual método pra pesquisar agradeço

Da uma olhada sobre usar “ancoragem” não sei é este o nome correto, mas você pode utilizar o jquery para dar o foco em qualquer elemento da página usando o ID dele.

Vou dar uma olhada aqui se achar um exemplo eu te mando!

Beto_Sagaz 10 de ago. de 2012

junaooaks:
Beto Sagaz

desta forma que você colocou não funciona

A linha da tabela:

O botao:

//Como esta
	onclick ="$("tr").remove("#remover'+next+'");"

	//Como deveria estar
	onclick ="$(\'tr\').remove(\'#remover'+next+'\');"

Quebra o apostrofo quando montar a string.
Testei aqui de tres maneiras distintas e todas funcionaram.

junaooaks 13 de ago. de 2012

pessoal nessa ocasião como faria para somar o valor dos campos do formulário dinâmico :oops:

claudsan 16 de ago. de 2012

Explica melhor o que quer fazer, eu não entendi rs

junaooaks 16 de ago. de 2012

claudsan
obrigado ja resolvi

function soma (){
        vl  = parseFloat(document.getElementById('vl').innerHTML);
        per = parseFloat(document.getElementById("per").value);
        
        resultado =((vl / 100) * per) + vl;
        
        resultado = (Math.round(resultado*100))/100;
        
        document.custo.total.value=resultado;
        
    }

bem simple
pega o valor da linha pela class
pega o valor do input digitado
calcula a porcentagem
arredonda a virgula

obrigado

Criado 10 de agosto de 2012

Ultima resposta 16 de ago. de 2012

Respostas 14

Participantes 4

14 Respostas

Topicos relacionados