Moving and removing HTML elements with jQuery

Asked

Viewed 9,080 times

7

I’m having problems with the code below. In case I have two menus, the menu menuAprendido and the menu menuAprender and I have to add objects to menuAprender and move them to the menuAprendido, so far so good. The problem is that by clicking the move button, I can add the item to the menuAprendido but I don’t know how to remove it from the menuAprender and ,consequently, do not know how, by pressing the remove button, remove some specific item from the menuAprender.

I know there’s a command $('algumacoisa').remove();, but I couldn’t 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>
<!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>

jquery

1 answer

12


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

The code is something like that:

$("#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 delete 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 noted in comment below, the above code still has a problem: if the content of two or more items partially match what was typed, more elements will be moved. You can solve it by taking all the elements and filtering the set by the exact text. For this you need to change in the two functions above the line that defines the item by:

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

References

  • Dude helped a lot, thank you very much. I only have doubts now about remove(), as I cannot remove a specific element when I click the remove button

  • @Erick I updated the response with the removal code (the principles are the same).

  • @bfavaretto I’ve been editing the code these days and did some tests, I realized that if I add two subjects like "Si" and "Si2" (information systems), and try to move the subject "Si" it will move both. I tried to fix it but I didn’t succeed.

  • @Erick I added the correction of that.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.