How to delete HTML elements using Javascript?

Question

How to delete HTML elements using Javascript?

Asked 5 years, 5 months ago

Viewed 2,685 times

1

I am trying to make a bingo in HTML/Javascript and at the moment I need to delete a table (card) registered as soon as the user click on the delete button, as I am a beginner in Javascript I went to several websites and tested several commands but none worked, anyone who knows help me. Here comes the code:

<!DOCUMENT html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <style>
                #container {
                    display: flex;
                    flex-wrap: wrap;
                  }
                table {
                    border: 1px solid black; 
                    margin: 10px;
                    vertical-align: bottom;
                }

        </style>
    </head>

    <body>

        <input type="text" id="nome">
        <input type="button" name="Criar" value="Cadastrar" id="botao">
        <div id="container"></div>


        <script> 
                var nome = window.document.getElementById('nome')
                var botao = window.document.getElementById('botao')
                botao.addEventListener('click',clicar_botao)



                function clicar_botao(){
                    var elemento_bisavo = document.getElementById('container');
                    var elemento_avo = document.createElement('table');
                    var elemento_pai = document.createElement('tr');
                    var elemento_filho = document.createElement('th');
                    var elemento_filho2 = document.createElement('th');
                    var botao_apaga = document.createElement('input');
                    var texto = document.createTextNode(nome.value);

                    elemento_avo.setAttribute("id","avo");
                    botao_apaga.setAttribute("type","button");
                    botao_apaga.setAttribute("value","Apagar");
                    botao_apaga.setAttribute("id","apagar");
                    botao_apaga.setAttribute("onclick","click");


                    function click(){
                        document.getELementById('avo').style.display="none";
                        document.getElementById('avo').style.display="hidden";

                    }
                    elemento_filho.appendChild(texto);
                    elemento_filho2.appendChild(botao_apaga);
                    elemento_bisavo.appendChild(elemento_avo);
                    elemento_avo.appendChild(elemento_pai);
                    elemento_pai.appendChild(elemento_filho);
                    elemento_pai.appendChild(elemento_filho2);
                }
        </script>
    </body>
</html>

NOTE: the code to delete the table should be inside the click function, the most I found was a property to make the table invisible, but still does not work.

/ Have you tried? function click(){
 document.getELementById('avo').remove();
 document.getElementById('avo').remove();
 }

– Maury Developer

2019/07/20 at 19:44
I found this, I’ll test agr

– Akali

2019/07/20 at 19:53
If it works, give me a reputation ,I’ve published my answer. I hope I’ve helped.

– Maury Developer

2019/07/20 at 19:55

2 answers

4

First you are creating elements with equal id’s, which is already wrong. An id should be unique on the page.

Another problem is that you are using click() as a function, which cannot because the click() is already a native Javascript function. You would have to use another name, such as clic, for example.

As you say you are a beginner in language, try to learn to name objects (functions, variables etc.) without using reserved names or native function names.

Another thing is that you put the function within another function. This will cause the onclick attribute you are using not to have access to the function because of the scope.

My suggestion is to create different id’s with a variable and go incrementing this variable and concatenating in the ids, thus generating different ids, passing to the function as parameter that will remove the created elements.

Behold:

var ids = 1;
var nome = window.document.getElementById('nome')
var botao = window.document.getElementById('botao')
botao.addEventListener('click',clicar_botao)

function clic(id){
   document.getElementById('avo'+id).outerHTML = '';
}

function clicar_botao(){
    var elemento_bisavo = document.getElementById('container');
    var elemento_avo = document.createElement('table');
    var elemento_pai = document.createElement('tr');
    var elemento_filho = document.createElement('th');
    var elemento_filho2 = document.createElement('th');
    var botao_apaga = document.createElement('input');
    var texto = document.createTextNode(nome.value);

    elemento_avo.setAttribute("id","avo"+ids);
    botao_apaga.setAttribute("type","button");
    botao_apaga.setAttribute("value","Apagar");
    botao_apaga.setAttribute("onclick","clic("+ids+")");


    elemento_filho.appendChild(texto);
    elemento_filho2.appendChild(botao_apaga);
    elemento_bisavo.appendChild(elemento_avo);
    elemento_avo.appendChild(elemento_pai);
    elemento_pai.appendChild(elemento_filho);
    elemento_pai.appendChild(elemento_filho2);
    ids++;
}

#container {
     display: flex;
     flex-wrap: wrap;
   }
 table {
     border: 1px solid black; 
     margin: 10px;
     vertical-align: bottom;
 }

<input type="text" id="nome">
<input type="button" name="Criar" value="Cadastrar" id="botao">
<div id="container"></div>

But there’s only one element with the id = "grandfather", so I didn’t understand that of incrementing ids. Regarding the creation of the function I thought that if I created it outside it would be a mistake, since the item n had been created; on the click I thought it would only be activated when it was inside the onclick attribute. Thanks for the explanations and tips, I will use from now on, only n understood msm the issue of ids

– Akali

2019/07/20 at 20:13
Each time you create the element increase ids. Ex.: avo1,avo2,avo3...

– Maury Developer

2019/07/20 at 20:17
@Daniellucas The issue of id’s is this: see that you create elements on the page with the same id "avo" and "delete". There can be no more than one element on the page with the same id, it would be the same if my number were the same as yours. Regarding incrementing, I created a variable that starts from 1 and each time an element is created the +1 sum variable, that is, it starts from 1, then turns 2, 3, 4 etc... with that I create different id’s: avo1, avo2, avo3 etc...

– Sam

2019/07/20 at 20:17
@Daniellucas See also that not even putting id on the "delete" button was necessary, because it would be useless.

– Sam

2019/07/20 at 20:19
If you wanted to remove all use method for (i=1;i<ids;i++) {document.getElementById("avo"+i).remove(); }

– Maury Developer

2019/07/20 at 20:22
ah, I understood agr, vlw of ninth by patience and explanation

– Akali

2019/07/20 at 20:23
@Daniellucas is welcome, young man. You already know what to do when an answer to your questions is satisfactory?

– Sam

2019/07/20 at 20:25
I was going to use the id "erase" to be able to pick up the button with getElement, but it wasn’t necessary to use this way

– Akali

2019/07/20 at 20:26
@Daniellucas When you are more familiar with the language, you will realize that you will use mt few times ids. Generally the excessive use of ids is of those who do not know mt language and find in ids an easy way to reach a goal, but most of the time it does is complicate more rs.. Abs!

– Sam

2019/07/20 at 20:28
@Sam press the button to mark as useful? I’m new here tbm kkk

– Akali

2019/07/20 at 20:29
I already voted for the ^....

– Sam

2019/07/20 at 20:29
I’m talking about your answer

– Akali

2019/07/20 at 20:30
@Maurydeveloper good idea, I’ll make a button to erase everything, vlw

– Akali

2019/07/20 at 20:31
@Daniellucas A tah, I understand.... you can vote yes if you want to give some extra points so you answered something that you found useful.

– Sam

2019/07/20 at 20:32
@Sam is why you had asked if I knew what to do when an answer was satisfactory, just press the one of the person who answered or does more?

– Akali

2019/07/20 at 20:33
You should mark only 1 reply with (the one you thought best) and you can vote for the answers you want, even the one you have marked ✔.

– Sam

2019/07/20 at 20:34
@Daniel Lucas Anything ask. I’m 100% online. Big hug and good luck in the developer career. Sam already voted in favor of you.

– Maury Developer

2019/07/20 at 20:35
I do technical course at IFRN, but I plan to continue in the area. Thank you for the strength, hugging

– Akali

2019/07/20 at 20:37

Show 13 more comments

Browser other questions tagged javascript html

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

by Maury Developer • **787** points · Answer 1 · 2019-07-20T19:54:26+00:00

Hello, use method use remove(). Have different ids. Change function name to _click

function _click(){
   document.getELementById('avo1').remove();
   document.getElementById('avo2').remove(); 
}

Some important links: Remove page element with javascript

How to remove DIV specifies with javascript?

http://everon.com.br/2017/04/22/javascript-remover-um-elemento-html-de-uma-pagina/

I hope I’ve helped.