How to add and remove elements with Javascript

Question

How to add and remove elements with Javascript

Asked 6 years, 2 months ago

Viewed 3,043 times

1

Hello, I wonder how I could add and remove elements to html using javascript (it is not allowed to use something like jQuery), my code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pedidos</title>
    <link rel="stylesheet" href="main.css">
</head>
<body style="background-color: orange">
    <div class="container">
        <h1>Faça seu pedido</h1>
        <form action="">
            <div class="content">
                <label for="">Nome: </label>
                <input id="nome" type="text">
            </div>
            <div class="content">
                <label for="">Fone: </label>
                <textarea name="textarea" cols="40" rows="5"></textarea>
            </div>
            <div class="content">
                <label for="">Endereço: </label>
                <input id="endereco" type="text">
            </div>
            <div class="sanduiche">
                <label for="">Pedido</label>
                <select name="" id="pedido">
                    <option value="n001">Pedido Doidao 001</option>
                    <option value="n002">Pedido Doidao 002</option>
                    <option value="n003">Pedido Doidao 003</option>
                    <option value="n004">Pedido Doidao 004</option>
                </select>
                <label for="">Pão</label>
                <select name="" id="pao">
                    <option value="pao1">Pão 1</option>
                    <option value="pao2">Pão 2</option>
                    <option value="pao3">Pão 3</option>
                    <option value="pao4">Pão 4</option>
                </select>
                <label for="">Quantidade</label>
                <input id="qtd" type="number">
                <button onclick="adicionar()">Adicionar</button>
            </div>
        </form>
        <div class="adicionados" id="tabela">
            <div class="rowtabela">
                <div class="item">
                    <b>Quantidade</b>
                </div>
                <div class="item">
                    <b>Sanduíche</b>
                </div>
                <div class="item">

                </div>
            </div>
            <div class="rowtabela" id="1">
                <div class="item">
                    20
                </div>
                <div class="item">
                    Sanduíche Brabissimo
                </div>
                <div class="botao">
                    <button onclick="remover()">X</button>
                </div>
            </div>
        </div>
        <button class="enviar">Enviar</button>
    </div>
    <script>
        function adicionar(){
            var tabela = getElementById('tabela');
            var row = document.createElement("div");
            row.classList.add('rowtabela');

            var qtddiv =  document.createElement("div");
            qtddiv.classList.add('item');
            qtd = document.getElementById("qtd").textContent;
            qtdtxt = document.createTextNode(qtd);
            qtdiv.appendChild(qtdtxt);
            row.appendChild(qtdiv);

            var tpdiv =  document.createElement("div");
            tpdiv.classList.add('item');
            tp = document.getElementById("pedido").textContent;
            tptxt = document.createTextNode(tp);
            tpdiv.appendChild(tptxt);
            row.appendChild(tpdiv);

            tabela.appendChild(row);
        }
        function remover(){
            alert(this.nodeParent)
            document.getElementById(this.nodeParent).remove()
        }
    </script>
</body>
</html>

CSS:

body{
    background: orange;
}
*{
    margin: 0;
    padding: 0;
    color: black;
}
h1{
    margin-bottom: 20px;
    text-align: center;
}
button{
    padding:4px;
}
.container{
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}
.content{
    margin-bottom: 10px;
    display: flex;
}
.sanduiche{
    margin-bottom: 10px;
    display: flex;
}
.content > input{
    width: 100%;
    height: 25px;
    border: solid 1px;
    background: white;
    color: black;
    border: 0px;
    border-radius: 2px;
    margin-left: 10px;
}
.content > textarea{
    width: 100%;
    border: solid 1px;
    background: white;
    color: black;
    border: 0px;
    border-radius: 2px;
    margin-left: 10px;
}
#fone{
    height: 70px;
}
.sanduiche > label{
    margin-right: 15px;
}
.sanduiche > select{
    width: 30%;
    height: 25px;
    margin-right: 15px;
}
.sanduiche > input{
    width: 30%;
    height: 25px;
    border: solid 1px;
    background: white;
    color: black;
    border: 0px;
    border-radius: 2px;
}
#qtd{
    margin-right: 10px;
}
.adicionados{
    border: solid 2px white;
}
.rowtabela{
    display: flex;
}
.item{
    margin-right: 15%;
    margin-left: 15%;
}
.enviar{
    width: 100%;
    margin-top: 5px;
}

2 answers

0

I decided to reformulate your code for having many syntax problems and unnecessary complications. Basically it is to use innerHTML to add new elements and outerHTML = '' to remove them (instead of the remove() not supported in browsers prior to IE 11, as seen here: https://caniuse.com/#feat=childnode-remove).

Soon the code went like this:

function adicionar(){
  
   var tabela = document.getElementById('tabela');
   var tp = document.getElementById("pedido");
   tp = tp.options[tp.selectedIndex].textContent;
   var qtd = document.getElementById("qtd").value;
   
   var ped_id = document.body.querySelectorAll(".rowtabela").length;
   
   var novo_item = '<div class="rowtabela" id="'+ped_id+'">'
   +'<div class="item">'+qtd+'</div>'
   +'<div class="item">'+tp+'</div>'
   +'<div class="botao">'
   +'<button onclick="remover(this)">X</button>'
   +'</div></div>';
   
   tabela.innerHTML += novo_item;
   
}

function remover(e){
   e.parentNode.parentNode.outerHTML = '';
}

   body{
    background: orange;
}
*{
    margin: 0;
    padding: 0;
    color: black;
}
h1{
    margin-bottom: 20px;
    text-align: center;
}
button{
    padding:4px;
}
.container{
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}
.content{
    margin-bottom: 10px;
    display: flex;
}
.sanduiche{
    margin-bottom: 10px;
    display: flex;
}
.content > input{
    width: 100%;
    height: 25px;
    border: solid 1px;
    background: white;
    color: black;
    border: 0px;
    border-radius: 2px;
    margin-left: 10px;
}
.content > textarea{
    width: 100%;
    border: solid 1px;
    background: white;
    color: black;
    border: 0px;
    border-radius: 2px;
    margin-left: 10px;
}
#fone{
    height: 70px;
}
.sanduiche > label{
    margin-right: 15px;
}
.sanduiche > select{
    width: 30%;
    height: 25px;
    margin-right: 15px;
}
.sanduiche > input{
    width: 30%;
    height: 25px;
    border: solid 1px;
    background: white;
    color: black;
    border: 0px;
    border-radius: 2px;
}
#qtd{
    margin-right: 10px;
}
.adicionados{
    border: solid 2px white;
}
.rowtabela{
    display: flex;
}
.item{
    margin-right: 15%;
    margin-left: 15%;
}
.enviar{
    width: 100%;
    margin-top: 5px;
}

    <div class="container">
        <h1>Faça seu pedido</h1>
        <form action="">
            <div class="content">
                <label for="">Nome: </label>
                <input id="nome" type="text">
            </div>
            <div class="content">
                <label for="">Fone: </label>
                <textarea name="textarea" cols="40" rows="5"></textarea>
            </div>
            <div class="content">
                <label for="">Endereço: </label>
                <input id="endereco" type="text">
            </div>
            <div class="sanduiche">
                <label for="">Pedido</label>
                <select name="" id="pedido">
                    <option value="n001">Pedido Doidao 001</option>
                    <option value="n002">Pedido Doidao 002</option>
                    <option value="n003">Pedido Doidao 003</option>
                    <option value="n004">Pedido Doidao 004</option>
                </select>
                <label for="">Pão</label>
                <select name="" id="pao">
                    <option value="pao1">Pão 1</option>
                    <option value="pao2">Pão 2</option>
                    <option value="pao3">Pão 3</option>
                    <option value="pao4">Pão 4</option>
                </select>
                <label for="">Quantidade</label>
                <input id="qtd" type="number">
                <button type="button" onclick="adicionar()">Adicionar</button>
            </div>
        </form>
        <div class="adicionados" id="tabela">
            <div class="rowtabela">
                <div class="item">
                    <b>Quantidade</b>
                </div>
                <div class="item">
                    <b>Sanduíche</b>
                </div>
                <div class="item">

                </div>
            </div>
            <div class="rowtabela" id="1">
                <div class="item">
                    20
                </div>
                <div class="item">
                    Sanduíche Brabissimo
                </div>
                <div class="botao">
                    <button onclick="remover(this)">X</button>
                </div>
            </div>
        </div>
        <button class="enviar">Enviar</button>
    </div>

You have to warn the boy that the button Adicionar has to be type="button". You seem like I don’t know, rs :)

– user60252

2018/04/27 at 01:42
because eh, forgot rs, but in the answer I put

– Sam

2018/04/27 at 02:06
I saw, but he still didn’t, see https://answall.com/questions/294353/javascript-exibir-quantidade/294446#294446

– user60252

2018/04/27 at 16:17

Browser other questions tagged javascript html

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

by Costamilam • **9,556** points · Answer 1 · 2018-04-26T01:07:01+00:00

The simplest way I know is with innerHTML:

document.getElementById('criar').addEventListener('click', function(){
  document.getElementById('div').innerHTML = '<strong>Testo criado</strong>';
});

document.getElementById('destruir').addEventListener('click', function(){
  document.getElementById('div').innerHTML = '';
});

<button id='criar'>CRIAR</button>
<button id='destruir'>DESTRUIR</button>

<div id='div'>

<div>

You assign a string to innerHTML with text and/or HTML code, if you are going to assign text only you can also use innerText

But there are other ways