[Resolvido] percorrer lista e remover li

wdc_black_ · Maio 30, 2011

eai galera, gostaria de uma ajuda em jquery pra quem entende hehehee

queria um código para quando clicar no <span class="delfotobt"></span>

ele remova o li correspondente ao span...

<ul class="listafotos">
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>    
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>
   <li><span class="delfotobt" title="Excluir Foto"></span><img src="img.jpg" /></li>
</ul>

alguem sabe como fazer???

obrigado

William Bruno · Maio 31, 2011

simples..

você vai precisar da função .parent(), e da .remove()

wdc_black_ · Maio 31, 2011

tentei desse modo mas n está removendo a li

jQuery('.delfotobt').click(function(){
  var idfoto = jQuery(this).parents('li:first').attr('lang'); 
  var foto= jQuery(this).parents('li:first').attr('title'); 
  jQuery.post("pagina.php", {acao: 'removeAnexo', idfoto: idfoto, foto: foto},
     function(response){jQuery(this).parents('li:first').remove();
  });
});

ele executa o script, mas n remove o li

William Bruno · Maio 31, 2011

bastava isso:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.delfotobt').click(function(){
		var $this = $( this );
		$this.parent('li').remove();
	});
});
</script>
</head>
<body>
<ul class="listafotos">
	<li><span class="delfotobt" title="Excluir Foto">1</span><img src="img.jpg" /></li>
	<li><span class="delfotobt" title="Excluir Foto">2</span><img src="img.jpg" /></li>
	<li><span class="delfotobt" title="Excluir Foto">3</span><img src="img.jpg" /></li>
	<li><span class="delfotobt" title="Excluir Foto">4</span><img src="img.jpg" /></li>
	<li><span class="delfotobt" title="Excluir Foto">5</span><img src="img.jpg" /></li>
	<li><span class="delfotobt" title="Excluir Foto">6</span><img src="img.jpg" /></li>    
	<li><span class="delfotobt" title="Excluir Foto">7</span><img src="img.jpg" /></li>
	<li><span class="delfotobt" title="Excluir Foto">8</span><img src="img.jpg" /></li>
</ul>
</body>
</html>

0cool · Maio 31, 2011

Eu só mudaria uma coisa neste teu code William

Ao invés de fazer assim

var $this = $( this );
$this.parent('li').remove();

Eu faria assim

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

William Bruno · Maio 31, 2011

Deixei dessa forma, pois caso ele tenha que fazer mais operações com o objeto .delfotobt, é melhor que ele tenha uma variavel apontando para o elemento, do que ter que ir no DOM, e chamar o seletor jQuery novamente.

0cool · Maio 31, 2011

Ha sim, entendi, me basei naquele não pensei na possibilidade de uso duplo.

;)

wdc_black_ · Maio 31, 2011

mas eu preciso passar os 2 valores para o post, tanto o title como o lang....

William Bruno · Maio 31, 2011

E qual a duvida ?

onde deveria estar o lang ? no teu html não tem.

wdc_black_ · Maio 31, 2011

hehe realmente n coloquei o lang no html

minha ideia era essa aqui

<html>
<head>
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function(){
               $('.delfotobt').click(function(){
                       var $this = $( this );
                       $this.parent('li').remove();
               });
       });
       </script>
</head>
<body>

<ul class="listafotos"> 
<?php 
       $sql = "SELECT * FROM fotos WHERE idpagina = 1 ORDER BY idfoto DESC";
       $query = mysql_query($sql) or die (mysql_error());	
       $totaleventos = mysql_num_rows($query);
       if ($totaleventos > 0)
       {
         while($linha = mysql_fetch_array($query))
         {	
            extract($linha);
            ?>
           <li lang="<?php echo $idfoto; ?>" title="<?php echo $foto; ?>"><span class="delfotobt" title="Excluir Foto"></span><img src="arquivos/imagens/minis/thumb_<?php echo $foto; ?>" /></li>
           <?php
         } 
      } else { echo "Nenhuma foto cadastrada!";}
?>
</ul>
</body>
</html>

como eu passaria esses valores via post, para o link pagina.php ??

por isso tava tentando usar esse código, mas n funcionou

jQuery('.delfotobt').click(function(){
  var idfoto = jQuery(this).parents('li:first').attr('lang'); 
  var foto= jQuery(this).parents('li:first').attr('title'); 
  jQuery.post("pagina.php", {acao: 'removeAnexo', idfoto: idfoto, foto: foto},
     function(response){jQuery(this).parents('li:first').remove();
  });
});

William Bruno · Maio 31, 2011

você realmente não entendeu o código que postei ?

não notou as diferenças ?

você nem testou, ne?!

        $(document).ready(function(){
               $('.delfotobt').click(function(){
                       var $this = $( this );
                       var li = $this.parent('li');
                       li.remove();
                       alert( li.attr('lang') );
                       alert( li.attr('title') );
               });
       });

http://www.wbruno.com.br/blog/2011/04/04/nao-jquery-nao-aprenda-qualquer-framework-antes-de/

wdc_black_ · Maio 31, 2011

eu entendi willian, mas aonde está a parte de enviar via post o valor das variaveis???

William Bruno · Maio 31, 2011

eu entendi willian, mas aonde está a parte de enviar via post o valor das variaveis???

cara.. aqui é um fórum.

eu não vou fazer para você, okay ?

eu vou te ajudar.

se você tivesse rodado o script que postei, teria notado oque fiz, e dai, você seria capaz de continuar.

você não notou os alerts() ? dai em diante é simples.

Estude.

wdc_black_ · Maio 31, 2011

mas meu velho eu postei o código, eu pedi uma ajuda sobre o meu código, você que postou outro código :/

aqui está

jQuery('.delfotobt').click(function(){
  var idfoto = jQuery(this).parents('li:first').attr('lang'); 
  var foto= jQuery(this).parents('li:first').attr('title'); 
  jQuery.post("pagina.php", {acao: 'removeAnexo', idfoto: idfoto, foto: foto},
     function(response){jQuery(this).parents('li:first').remove();
  });
});

se tiver como dar uma ajuda com o meu script ;)

William Bruno · Maio 31, 2011

o 'outro script' que postei é apenas uma correção do teu.

entenda oque fiz, e aplique.

wdc_black_ · Maio 31, 2011

willian, fiz as alterações aqui, funcionou de boa ;)

$(document).ready(function(){
	$('.delfotobt').click(function(){
			var $this = $( this );
			var li = $this.parent('li');
			$.post("admin.php?S=pagina", {acao: 'removeAnexo', idfoto: li.attr('lang'), foto: li.attr('title')}, function(){
				li.remove();
  				});
	});
});

só mais 1 dúvida, teria como remover com efeito fadeOut(); ???

William Bruno · Maio 31, 2011

que tal:

 li.fadeOut().remove();

wdc_black_ · Maio 31, 2011

hummm, ele remove direto, sem dar o efeito fadeOut

fiz assim pra ficar aparecendo o efeito

li.fadeOut().delay(2000)..remove();

tem algum jeito melhor?

William Bruno · Maio 31, 2011

chamando no callback do fadeOut();

http://api.jquery.com/fadeOut/

wdc_black_ · Maio 31, 2011

blza , vlw willian :P

Arquivado

[Resolvido] percorrer lista e remover li

Recommended Posts

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

0cool 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

0cool 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wdc_black_ 0