Adding and removing elements in Javascript?

Question

I'm trying to make a generator for a mod menu in Call of Duty. I want people to be able to add a menu or delete one. I'm trying to id the menus sequentially so that I can use the text field values correctly. I made it so that if they delete a menu it changes the ids of all the other menus to one lower and same for the button id, but I don't know how to change the onlick event to remove the right element.

Better yet, if there's a better way to do this, I would love to know it.

<script type="text/javascript">
    y = 1
    function test2()
    {
        document.getElementById("test2").innerHTML += "<div id=\"child" + y + "\"><input type=\"text\" value=\"menu name\" \><input id=\"button" + y + "\" type=\"button\" value=\"remove?\" onclick=\"test3(" + y + ")\" /></div>";
        y++;
        alert(y);
    }
    function test3(x)
    {
        document.getElementById("test2").removeChild(document.getElementById("child" + x));

        for(var t = x+1;t < y;t++)
        {
            alert("t is " + t + ". And y is " + y);
            document.getElementById("button" + t).setAttribute("onclick" , "test3(t-1)");
            document.getElementById("button" + t).id = "button" + (t-1);
            document.getElementById("child" + t).id = "child" + (t-1);
        }
        y--;
    }

</script>
<input value="testing" type="button" onclick="test2()" />
<div id="test2" class="cfgcode"></div>

I would recommend taking a look at jQuery, this is a widely-used Javascript library that makes tasks such as these, and many others, a lot easier. — Kokos
– Kokos, Commented Jul 4, 2011 at 7:11
Why don't you try this library: jquery.com ? It's called JQuery, and you will have a less painful adventure with javascript :-). — MD Sayem Ahmed
– MD Sayem Ahmed, Commented Jul 4, 2011 at 7:12
Yes, jQuery is certainly the way to go. Besides that: Put var before all vars when using them he first time (var y = 1;) and use proper function names, i.e. not test unless that function is actually testing something (and even in that case, testSomething would be more appropriate) — ThiefMaster
– ThiefMaster, Commented Jul 4, 2011 at 7:13

beeglebug · Accepted Answer · 2011-07-04 08:09:15Z

1

I wouldn't worry about re-indexing all of the elements after you add or remove one, that seems a waste. It would be better to simply write a more generic function, rather than one with the element id hard coded into it.

For example, your first function could be written as so:

function genericFunction(el)
{
    var html = ''; // create any new html here
    el.innerHTML = html;
}

You can then add onclick handlers such as:

myDiv.onclick = function() { genericFunction(this) };

I would also agree with all the commenters above, use jQuery, it makes any code which interacts with the DOM much much simpler.

answered Jul 4, 2011 at 8:09

beeglebug

3,5421 gold badge25 silver badges40 bronze badges

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

2 Comments

beeglebug Over a year ago

The question asked was: "I don't know how to change the onlick event to remove the right element". I offered a better way to handle the onclick event so that it would always know the right element (by passing in this). How is that not an answer?

mplungjan Over a year ago

Hmm, ok. I'll delete my comment

Collectives™ on Stack Overflow

Adding and removing elements in Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related