javascript deleting adding and deleting elements dynamically

Question

I'm trying to let the user dynamically add languages with remove buttons for each one. I cannot figure out how to make the remove buttons work Basically, I want the input text field removed if the X glyphicon next to it pressed Thanks

        function setLanguage(){
              var l_name = document.getElementById("selected_language").value;
             var l_level = document.getElementById("lang_level").value;
       document.getElementById("sel_languages").innerHTML += "<div><input type = 'text'  readonly='readonly' name = 'language_selected1[]' value ='"  +  l_name  + " " + l_level  + "'/> <span id='language_clear' onclick='myFunction()'  class='glyphicon glyphicon-remove-circle'></span></div>" ;

     }




  function   myFunction(){
            $(this).parent().remove();

    }

We'll need to see the html, and let us know what you tried.

wazz
– wazz

2018-06-20 03:59:10 +00:00
Commented Jun 20, 2018 at 3:59 — wazz
– wazz, Commented Jun 20, 2018 at 3:59

Thomas Cohn · Accepted Answer · 2018-06-20 04:03:24Z

1

Instead of using the onclick attribute of the html element, you can add document.getElementById("language_clear").addEventListener("click", myFunction); to the following line. I've posted a simple working example here.

w3schools has a nice article on event listeners here. If you'd prefer a jQuery version, you may want to check the documentation here; they have some nice examples.

answered Jun 20, 2018 at 4:03

Thomas Cohn

5074 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript deleting adding and deleting elements dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related