Pessoal,
estou com uma pequena dificuldade, tenho uma tabela com o ícone de lixeira, e quero que ao clicar ele remova a linha referente a lixeira que ele clicou, como posso fazer isso ?
meu código está logo abaixo.
– HTML –
<!DOCTYPE html>
<!-- saved from url=(0042)http://semantic-ui.com/examples/login.html -->
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Standard Meta -->
<meta charset="utf-8">
<!-- Site Properties -->
<title>Login</title>
<link rel="stylesheet" type="text/css" href="dist/semantic.min.css">
<script src="dist/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="remove.js"></script>
</head>
<body>
<form class="ui large form" style="width:70%;">
<table id="tablePagamento" class="ui selectable inverted table">
<thead>
<tr>
<th>Produto</th>
<th>Quantidade</th>
<th>Valor</th>
<th class="right aligned">Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td id="jh">John</td>
<td><input maxlength="3"type="text" id="jh" style="width:67px; height: 40px;"></td>
<td>None</td>
<td class="right aligned"><a href="" style="color: #FFF"><i class="trash icon" id="remove"></i></a></td>
</tr>
<tr>
<td>Jamie</td>
<td id="jh"><input maxlength="3" type="text" style="width:67px; height: 40px;"></td>
<td>Requires call</td>
<td class="right aligned"><a href="" style="color: #FFF"><i class="trash icon" id="remove"></i></a></td>
</tr>
<tr>
<td>Jill</td>
<td><input maxlength="3" type="text" style="width:67px; height: 40px;"></td>
<td id="jh">None</td>
<td class="right aligned"><a href="jh" id="teste" style="color: #FFF"><i class="trash icon" id="remove"></i></a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
– Js –
$(document).ready(function(){
$('#remove').click(function(){
var id = $(this).parent().find('td').attr('id');
alert(id);
return false;
});
});