Estou tendo problemas com relação ao código abaixo. No caso eu tenho dois menus, o menu menuAprendido
e o menu menuAprender
e eu tenho que adicionar objetos no menuAprender
e movê-los para o menuAprendido
, até aí tudo bem. O problema é que ao clicar no botão mover, eu consigo adicionar o item ao menuAprendido
mas não sei como removê-lo do menuAprender
e ,consequentemente, não sei como, ao apertar o botão remover, remover algum item especifico do menuAprender
.
Sei que existe um comando $('algumacoisa').remove();
, mas não consegui usá-lo para excluir um objeto especifico do menu.
/**
* Created by Erick on 24/10/2014.
*/
$(document).ready(function() {
var array = new Array();
$("#okbtn").click(function() {
var item = $(".inputTema").val();
if(item == "") return;
item = "<div class='list-group-item' align='center'>" + item + "</div>";
array.push(item);
$("#menuAprender").append(item);
confirm('Assunto adicionado com sucesso');
});
$("#moverbtn").click(function() {
var assunto = prompt('digite o assunto que deseja mover para a lista de assuntos que já aprendeu!');
if(assunto == "") return;
assunto = "<div class='list-group-item' align='center'>" + assunto + "</div>";
for(var i = 0; i < array.length; i++) {
var j = ("#" + i).val();
if(assunto === array[i]) {
$("#menuAprendido").append(assunto);
confirm('Assunto movido com sucesso');
}
}
});
$("#removerbtn").click(function() {
var assunto = prompt('digite o assunto que deseja remover da lista de assuntos que deseja aprender!');
if(item == "") return;
assunto = "<div class='list-group-item' align='center'>" + assunto + "</div>";
for(var i = 0; i < array.length; i++) {
if(assunto === array[i]) {
confirm('Assunto removido com sucesso');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SI1</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/script_pagina3.js"></script>
<style>
#one {
width: 500px;
}
#two {
width: 500px;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Sistemas de Informação 1</h1>
<p>Obrigado por ter se cadastrado na disciplina.</p>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title" align="center">Caso deseje você pode nos mostrar o que deseja aprender ou já aprendeu.</h2>
</div>
<div class="panel-body">
<div class="container" id="one">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title" align="center">Assuntos que eu gostaria de aprender.</h2>
<br>
<div align="center"><input type="text" class="inputTema"><button type="submit" id="okbtn">OK</button></div>
</div>
<div class="panel-body">
<div id="menuAprender">
</div>
</div>
</div>
</div>
<div align="center">
<button type="submit" id="moverbtn">mover</button>
<button type="submit" id="removerbtn">remover</button>
</div>
<div class="panel-body">
<div class="container" id="two">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title" align="center">Assuntos que já aprendi.</h2>
</div>
<div class="panel-body">
<div id="menuAprendido">
</div>
</div>
</div>
</div>
<div class="panel-body">
<div align="center">
<a href="index.html">
<button type="submit">Voltar para a página inicial</button>
</a>
</div>
</div>
</div>
</div>
</body>
</html>