Как можно удалить динамически созданный элемент

[Арсений]

я создаю элемент вот таким способом

document.getElementById( 'img' ).onclick = function (e) {
e = e || window.event
var div = document.createElement( "div" );
div.id = "el";
div.setAttribute("style","position:absolute; width:4px; height:4px; background-color:blue; top:"+e.pageY+"px; left:"+e.pageX+"px;");
div.setAttribute("onmouseup", "release()");
div.setAttribute("onmousedown", "capture(event)");
div.setAttribute("oncontextmenu", "return menu(1, event);");
document.body.appendChild( div );
}

А затем если нажать правой кнопкой по нему мы попадем в меню.
Вот отрывок кода этого меню

var menu = document.getElementById("contextMenuId");
    var html = "";
    switch (type) {
        case (1) :
            html = "Меню";
            html += "<br />Название";
            html += "<br />Описание";
            html += "<br /><a onclick='el_delete()' href='#'>Удалить</a>";
			html += "<br /><a onclick='menuclose()' href='#'>Закрыть</a>";
        break;

Но скажем если я создал где-то 10-20 таких элементов и нажму на любом из них то каким образом мне можно его удалить?
Подскажите хотя бы теорией, а то я даже не представляю себе это.

[Арсений]

ммм ни кто не знает или всем лень подсказать?

[haha]

Ссылку на создаваемый див сохранять отдельно в глобальном скопище, а потом спокойно удалять div.parentNode.removeChild(div). как-то так.
И вообще, можно не создавать каждый раз новое меню, достаточно одну менюшку скрыть и показать, когда нужно. Ну и функции будут слегка другими.

[PeaceCoder]

И вообще, можно не создавать каждый раз новое меню,

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

[haha]

Кто пишет тормозное меню, тому и создание/удаление не поможет.

[pandasensey]

var root = document.createElement("DIV"), //Тут мы создаем корневой элемент
node = document.createElement("DIV"); //А тут создаем чайлда

root.appendChild(node);
document.body.appendChild(root);

В итоге у нас получается два новых, созданных динамически, элемента, ссылки на которых мы записали в соответствующие переменные. Далее мы можем сделать так:

root.removeChild(node);

или

root.removeChild(root.lastNode);

Для того, чтобы работало в твоем случае - достаточно хранить все ссылки в массиве или объекте - как удобнее. Но согласен с общим мнением по поводу неверного подхода.

Такой подход очень плохо работает с элементами типа IMG, так как далеко не всегда при удалении их из DOM-структуры, они удаляются из очереди загрузки броузера и у них по прежнему могут выскакивать события onload и т.д.

[Арсений]

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

[haha]

Арсений,
Области видимости переменных в функциях. Как-то так надо искать. Скрещивать с DOM надо правильно, и все получится.

function (e) {
e = e || window.event;
var div = document.createElement( "div" );
div.id = "el";
div.setAttribute("style","position:absolute; width:4px; height:4px; background-color:blue; top:"+e.pageY+"px; left:"+e.pageX+"px;");
div.setAttribute("onmouseup", "release()");
div.setAttribute("onmousedown", "capture(event)");
div.setAttribute("oncontextmenu", "return menu(1, event);");
document.body.appendChild( div );
}

в этой функции нужно вынести переменную div наружу, тогда созданный элемент станет легко досягаем.

[pandasensey]

как сохранить ссылку на создаваемый элемент

Я же написал:

var root = document.createElement("DIV")

После выполнения этой команды в переменную root будут записана ссылка на созданный элемент. И после добавления этого элемента к чему-дибо (appendChild) ссылка остается. Ты можешь создавать это и в цикле и присваивать элементам массива ссылки на новые элементы:

var root = document.createElement('DIV'),
temp = document.createDocumentFragment(); //Это важно, потому что в цикле добавлять элементы к чему-то существующему на странице - неэтично)
var links = [];
for (var i = 0; i < 10; i++) {
  links[i] = document.createElement('DIV');
  temp.appendChild(links[i]);
}
//В этом цикле мы создали 10 DIV'ов во временном контейнере и записали ссылки на них в массив links
root.appendChild(temp);
document.body.appendChild(root);

[Арсений]

pandasensey
Я вас понял но выходит что тут создается сразу 10ть диваков а мне нужно что бы диваки создавались по одному.
Вот смотрите:
шаг1 - Я нажимаю левую кнопку мыши на картинке создается дивак1
шаг2 - Я нажимаю левую кнопку мыши на картинке создается дивак2
...
шаг10 - Я нажимаю левую кнопку мыши на картинке создается дивак10
шаг11 - Я нажимаю левую\правую кнопку мыши на дивак5 появляется меню для удаления дивака