Moving and Removing HTML Elements with jQuery

Navigation
7

I'm having trouble with the code below. In the case I have two menus, the menuAprendido menu and the menuAprender menu and I have to add objects in menuAprender and move them to menuAprendido , so far so good. The problem is that when I click the move button, I can add the item to menuAprendido but I do not know how to remove it from menuAprender and consequently I do not know how, when I click the remove button, remove some specific item from menuAprender .

I know there is a $('algumacoisa').remove(); command, but I could not use it to delete a specific object from the 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><!DOCTYPEhtml><html><head><metacharset="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>
    
asked by anonymous 26.10.2014 / 13:54

1 answer

12

I suggest a different approach: Instead of creating a new div to insert into #menuAprendido , find the item already in the other menu and move from one place to another. So you would not need any remove() .

The code looks something like this: 

$("#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');
});

In the removal command, the logic is the same: select the item to be removed instead of creating a new 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');
});

As pointed out in comment below, the above code still has a problem: If the content of two or more items partially matches what was typed, more elements will be moved. You can solve by picking up all the elements and filtering the set by the exact text. To do this, you need to change the line that defines the item by: 

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

References

26.10.2014 / 14:27
Function equivalent to "DISTINCT ON" in Oracle DB? Run parallel process in PHP