Форум

Kvark · #1 (**permalink**) 13.08.2013, 18:46

Помогите разобраться что я не так делаю, мне нужно в контейнере удалить элементы определенного типа, в даном случае <img> если делаю так с алертом - выводит 7 штук:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function RemoveEl(ContainerElementId, RemoveElementType)
{
	var tmpdoc = document.getElementById(ContainerElementId);
	var oc=tmpdoc.getElementsByTagName(RemoveElementType)
	alert('Всего найдено: ' + oc.length)
	for (var i=0; i<oc.length; i++) 
	{
		alert(oc[i]);
		//oc[i].parentNode ? oc[i].parentNode.removeChild(oc[i]) : oc[i];
	}	
};
</script>
</head>
<body>
<button onclick="RemoveEl('ServiceCatalog', 'img');">Run</button>
<div id="ServiceCatalog">
<fieldset id="X15" widgettype="group" class="groupBox">
	<legend id="X15Legend">
		<span class="caption" id="X15Caption">
			Service Catalog
		</span>
	</legend>
	<div id="X21">
		<img src="servlet/image?application=joinsvcDisplay&amp;topic=Employee+Lifecycle+Services&amp;type=img&amp;key=j3gzV0NsEk6fQw6ZjH2%2Fdg&amp;width=117&amp;height=57" alt="" title="" onload="registerImageObject(this, this.width, this.height, 26, 57);" style="width: 14%;">
	</div>
	<a buttonid="501" id="X22Border" href="javascript:tpzDrillTable('var/L.item.1', 'Employee Lifecycle Services', '501','',true)" title="Employee Lifecycle Services" tabindex="" content="Employee Lifecycle Services">
		<img class="HoverImage" id="X22" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Employee Lifecycle Services" title="Employee Lifecycle Services" enabled="1">
		Employee Lifecycle Services
	</a>
	<input type="hidden" id="var/L.item.1" name="var/L.item.1">
	<span id="X23" type="label">
		Contains lifecycle services available to employees and managers, including New Employee requests, Personal Information Change, and Employment Status Change, …
	</span>
	<div id="X24">
		<img src="servlet/image?application=joinsvcDisplay&amp;topic=Personal+Productivity+Services&amp;type=img&amp;key=GYa3ZmEl4rbIfTpSb%2FqqFA&amp;width=117&amp;height=57" alt="" title="" onload="registerImageObject(this, this.width, this.height, 26, 57);" style="width: 14%;">
	</div>
	<a buttonid="502" id="X25Border" href="javascript:tpzDrillTable('var/L.item.2', 'Personal Productivity Services', '502','',true)" title="Personal Productivity Services" tabindex="" content="Personal Productivity Services">
		<img class="HoverImage" id="X25" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Personal Productivity Services" title="Personal Productivity Services" enabled="1">
		Personal Productivity Services
	</a>
	<input type="hidden" id="var/L.item.2" name="var/L.item.2">
	<span id="X26" type="label">
		Contains common employee services such as telecommunications, collaboration support, accounts, network access, software, hardware bundles …
	</span>
	<a buttonid="503" id="X28Border" href="javascript:void(0);" title="Item 3" tabindex="" content="Item 3" style="visibility: hidden;">
		<img class="HoverImage" id="X28" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 3" title="Item 3" enabled="0">
		Item 3
	</a>
	<input type="hidden" id="var/L.item.3" name="var/L.item.3">
	<span id="X29" type="label" style="visibility: hidden;">
		Desc3
	</span>
	<a buttonid="504" id="X31Border" href="javascript:void(0);" title="Item 4" tabindex="" content="Item 4" style="visibility: hidden;">
		<img class="HoverImage" id="X31" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 4" title="Item 4" enabled="0">
		Item 4
	</a>
	<input type="hidden" id="var/L.item.4" name="var/L.item.4">
	<span id="X32" type="label" style="visibility: hidden;">
		Desc4
	</span>
	<a buttonid="505" id="X34Border" href="javascript:void(0);" title="Item 5" tabindex="" content="Item 5" style="visibility: hidden;">
		<img class="HoverImage" id="X34" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 5" title="Item 5" enabled="0">
		Item 5
	</a>
	<input type="hidden" id="var/L.item.5" name="var/L.item.5">
		<span id="X35" type="label" style="visibility: hidden;">
			Desc5
		</span>
	<span id="X38" type="label">
		Items 1-2 of 2
	</span>
</fieldset>
</div>
</body>
</html>

а когда пробую их же удалить то сбой почему то:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function RemoveEl(ContainerElementId, RemoveElementType)
{
	var tmpdoc = document.getElementById(ContainerElementId);
	var oc=tmpdoc.getElementsByTagName(RemoveElementType)
	alert('udalim: ' + oc.length)
	for (var i=0; i<oc.length; i++) 
	{
		//alert(oc[i]);
		oc[i].parentNode ? oc[i].parentNode.removeChild(oc[i]) : oc[i];
	}
};
</script>
</head>
<body>
<button onclick="RemoveEl('ServiceCatalog', 'img');">Run</button>
<div id="ServiceCatalog">
<fieldset id="X15" widgettype="group" class="groupBox">
	<legend id="X15Legend">
		<span class="caption" id="X15Caption">
			Service Catalog
		</span>
	</legend>
	<div id="X21">
		<img src="servlet/image?application=joinsvcDisplay&amp;topic=Employee+Lifecycle+Services&amp;type=img&amp;key=j3gzV0NsEk6fQw6ZjH2%2Fdg&amp;width=117&amp;height=57" alt="" title="" onload="registerImageObject(this, this.width, this.height, 26, 57);" style="width: 14%;">
	</div>
	<a buttonid="501" id="X22Border" href="javascript:tpzDrillTable('var/L.item.1', 'Employee Lifecycle Services', '501','',true)" title="Employee Lifecycle Services" tabindex="" content="Employee Lifecycle Services">
		<img class="HoverImage" id="X22" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Employee Lifecycle Services" title="Employee Lifecycle Services" enabled="1">
		Employee Lifecycle Services
	</a>
	<input type="hidden" id="var/L.item.1" name="var/L.item.1">
	<span id="X23" type="label">
		Contains lifecycle services available to employees and managers, including New Employee requests, Personal Information Change, and Employment Status Change, …
	</span>
	<div id="X24">
		<img src="servlet/image?application=joinsvcDisplay&amp;topic=Personal+Productivity+Services&amp;type=img&amp;key=GYa3ZmEl4rbIfTpSb%2FqqFA&amp;width=117&amp;height=57" alt="" title="" onload="registerImageObject(this, this.width, this.height, 26, 57);" style="width: 14%;">
	</div>
	<a buttonid="502" id="X25Border" href="javascript:tpzDrillTable('var/L.item.2', 'Personal Productivity Services', '502','',true)" title="Personal Productivity Services" tabindex="" content="Personal Productivity Services">
		<img class="HoverImage" id="X25" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Personal Productivity Services" title="Personal Productivity Services" enabled="1">
		Personal Productivity Services
	</a>
	<input type="hidden" id="var/L.item.2" name="var/L.item.2">
	<span id="X26" type="label">
		Contains common employee services such as telecommunications, collaboration support, accounts, network access, software, hardware bundles …
	</span>
	<a buttonid="503" id="X28Border" href="javascript:void(0);" title="Item 3" tabindex="" content="Item 3" style="visibility: hidden;">
		<img class="HoverImage" id="X28" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 3" title="Item 3" enabled="0">
		Item 3
	</a>
	<input type="hidden" id="var/L.item.3" name="var/L.item.3">
	<span id="X29" type="label" style="visibility: hidden;">
		Desc3
	</span>
	<a buttonid="504" id="X31Border" href="javascript:void(0);" title="Item 4" tabindex="" content="Item 4" style="visibility: hidden;">
		<img class="HoverImage" id="X31" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 4" title="Item 4" enabled="0">
		Item 4
	</a>
	<input type="hidden" id="var/L.item.4" name="var/L.item.4">
	<span id="X32" type="label" style="visibility: hidden;">
		Desc4
	</span>
	<a buttonid="505" id="X34Border" href="javascript:void(0);" title="Item 5" tabindex="" content="Item 5" style="visibility: hidden;">
		<img class="HoverImage" id="X34" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 5" title="Item 5" enabled="0">
		Item 5
	</a>
	<input type="hidden" id="var/L.item.5" name="var/L.item.5">
		<span id="X35" type="label" style="visibility: hidden;">
			Desc5
		</span>
	<span id="X38" type="label">
		Items 1-2 of 2
	</span>
</fieldset>
</div>
</body>
</html>

Kvark · #2 (**permalink**) 13.08.2013, 19:09

неполучилось сделать рабочие примеры

но суть в том что алерт выводит все а удалить получаеться только первых 2 почемуто...

danik.js · #3 (**permalink**) 13.08.2013, 19:10

А консоль браузера открыть - не судьба? Не вижу элемента #ServiceCatalog. Где он?

Kvark · #4 (**permalink**) 13.08.2013, 19:18

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

Uncaught TypeError: Cannot read property 'clientWidth' of null sm.base.js:1
adjustImageSize sm.base.js:1
adjustImageOjectsSize sm.base.js:1
onload detail.do:82
Uncaught TypeError: Cannot call method 'getRight' of null cwc-Extjs-All.js:4
cwc.createMaskCloser cwc-Extjs-All.js:4
cwc.onError cwc-Extjs-All.js:4
window.cwc.onError cwc-api.js:2
window.onerror

рони · #5 (**permalink**) 13.08.2013, 19:32

Kvark,
удалять элементы можно с последнего тогда проблем меньше с индексом или всегда удалять только нулевой
oc[0].parentNode.removeChild(oc[0])

Kvark · #6 (**permalink**) 13.08.2013, 19:36

Спсибо сработало, только не понял почему...

danik.js · #7 (**permalink**) 13.08.2013, 19:38

Сообщение от Kvark

невразумительное

Что именно невразумительно? Ошибка в файле таком-то на странице такой-то. Попытка обратиться к свойству, когда в переменной вместо объекта - null. И стэк вызовов функций.
Подключи несжатую версию файла для отладки, либо отлаживай в хроме , там есть кнопочка Pretty Print

Kvark · #8 (**permalink**) 13.08.2013, 20:36

все, нашел сам в чем дело!

Зараза, оказываеться он, количество то, в реальном времени считает!
Изменил функцию, чтоб сначала запомнил количество в переменную и не выскакивал из цикла раньше времени:

var rpdnum = oc.length
for (var i=0; i<rpdnum; i++)
    {
        oc[0].parentNode.removeChild(oc[0]);
    }

danik.js · #9 (**permalink**) 13.08.2013, 20:44

Kvark, а чем ты занимаешься? Какие-то странные вопросы на форуме постишь. Зачем все это делать на JS? Это юзерскрипт какой или чего?

Kvark · #10 (**permalink**) 14.08.2013, 12:30

ну дело в том что я не дизайнер, я больше софтваре суппорт.тех.админ, но теперешнея работа связана с поддержкой HP service Manager и в нем есть поддержка ява скрипта, бо он выводит содержание через вебтер, и штатными средствами вывести то что нам нужно неполучаеться, а просить помощи HP - слишком долго ждать они инертные и такой "фигней" заниматься не хотят, а юзеры ноют что не удобно пользоваться таким интерфейсом, вот я и пытаюсь его улучшить

Форум

Справочник

Discord чат

Курсы javascript