7

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>

0

1 Resposta 1

12

Eu sugiro uma abordagem diferente: em vez de criar um novo div para inserir no #menuAprendido, encontre o item já existente no outro menu e mova de um lugar para outro. Assim não seria necessário nenhum remove().

O código é algo assim:

$("#moverbtn").click(function() {
    var assunto = prompt('digite o assunto que deseja mover para a lista de assuntos que já aprendeu!');
    if(assunto == "") return;

    var item = $('#menuAprender .list-group-item:contains("' + assunto + '")');
    $("#menuAprendido").append(item);
    alert('Assunto movido com sucesso');
});

No comando de remoção, a lógica é a mesma: selecione o item a ser removido, em vez de criar uma nova div:

$("#removerbtn").click(function() {
    var assunto = prompt('digite o assunto que deseja remover da lista de assuntos que deseja aprender!');
    if(assunto == "") return;

    var item = $('#menuAprender .list-group-item:contains("' + assunto + '")');
    item.remove();
    alert('Assunto removido com sucesso');
});

Como apontado em comentário abaixo, o código acima ainda tem um problema: se o conteúdo de dois ou mais itens corresponder parcialmente ao que foi digitado, mais elementos serão movidos. Dá para solucionar pegando todos os elementos e filtrando o conjunto pelo texto exato. Para isso é preciso trocar nas duas funções acima a linha que define o item por:

var item = $('#menuAprender .list-group-item').filter(function(i, el) {
    return $(el).text() === assunto;
});

Referências

4
  • Cara ajudou bastante, muito obrigado. Só tenho dúvidas agora com relação ao remove(), pois não consigo remover um elemento especifico quando eu clico no botão remover
    – Erick
    Commented 26/10/2014 às 13:39
  • @Erick Atualizei a resposta com o código da remoção (os princípios são os mesmos).
    – bfavaretto
    Commented 26/10/2014 às 14:46
  • @bfavaretto eu estive editando o código esses dias e fiz uns testes, percebi que se eu adicionar dois assuntos como "Si" e "Si2" (sistemas da informação), e tentar mover o assunto "Si" ele irá mover ambos. Tentei consertar isso mas não tive sucesso.
    – Erick
    Commented 30/10/2014 às 0:56
  • @Erick Acrescentei a correção disso.
    – bfavaretto
    Commented 30/10/2014 às 1:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .