[javascript] помогите разобраться

[daggerok]

нужно реализовать дерево (level 1): при вводе в поле названия элемента и нажатия Enter оно должно добавить элемент с картинкой знака "минус". картинка нужна для удаления этого элемента со страницы.
есть такой код реализации списка:

Код: Выделить всё

           var index = 0;
           
           function rmIt(obj) {
               document.getElementById("workSpace").removeChild(document.getElementById(obj.parentNode.id));
           }
           
           function addIt() {
               var mainElem = document.getElementById("workSpace");
               var inputElem = document.getElementById("add");
               var outerElem = document.createElement("div");
               var myImage = document.createElement("input");
               
               outerElem.id = index;
               myImage.type = "image";
               myImage.src = "minus.png";
               myImage.onclick = "rmIt(this);";
               
               outerElem.appendChild(myImage);
               mainElem.appendChild(outerElem);
               inputElem.value = "";
               index++;
           }
...
           <form action="" method="post" onsubmit="return false">
               <div id="workSpace"></div>
               <p>добавить элемент: <input type="text" id="add" value="" onchange="addIt();" /></p>
           </form>

элементы успешно добавляются в виде картинки (input) и названия элемента списка (span)
но, увы - при нажатии на картинку элемента input[type="image"] функция rmIt() не срабатывает
тогда как если в html-страницу вставить такой код:

Код: Выделить всё

                <p id="ppc"><input type="image" src="minus.png" onload="return false;" onclick="rmIt(this);" />test</p>

то функция нормально отрабатывает - элемент test рпи нажатии на картинку minus.png успешно удаляется.
что я делаю не так?
помогите разобраться, спасибо!

[Хостинг HostFood.ru]

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

[rmn]

Код: Выделить всё

element.onclick = rmIt(this);

или

Код: Выделить всё

element.onclick = function() {rmIt(this);}

[daggerok]

этот вариант не работает:

Код: Выделить всё

myImage.onclick = rmIt(this);

а вот при этом :

или

Код: Выделить всё

myImage.onclick = function() { rmIt(this); }

похоже, что элемент создается и как надо, но вот только созданный элемент сразу же удаляется...
можно ли как-то заставить срабатывать только при клике мышкой по картинке?
спасибо!

[daggerok]

или

Код: Выделить всё

myImage.onclick = function() { rmIt(this); }

похоже, что элемент создается и как надо, но вот только созданный элемент сразу же удаляется...
можно ли как-то заставить срабатывать только при клике мышкой по картинке?

проблему решил заменой input[type="image"] на input[type="button"] + css
javascript:

Код: Выделить всё

myImage.className = "remove";
myImage.onclick = function() { rmIt(this); };

css:

Код: Выделить всё

input[type="button"].remove {
    background: url(minus.png) no-repeat;
    border: none;
    height: 16px;
    width: 16px;
}

теперь function() { rmIt(this); } при создании элемента сама не запускается, а только по onclick кнопки с картинкой
всем спасибо.