removeChild в javascript / DOM не работает правильно, когда в функции присутствует более одного - PullRequest
Новая
       13

removeChild в javascript / DOM не работает правильно, когда в функции присутствует более одного

0 голосов
/ 11 октября 2011

UPDATE: Вот ссылка JsFiddle: http://jsfiddle.net/zAVFv/

Кажется, он не работает в JsFiddle, но думаю, он служит для отображения всего кода - HTML, CSS и Js.

Я сталкиваюсь с очень странной ситуацией при редактировании DOM с использованием Javascript. Мой пример кода ниже. По сути, swapCells принимает два объекта, каждый из которых имеет 2 дочерних элемента: один является элементом img, а другой - textNode. Я хочу увидеть, как работает removeChild.

Я отметил две линии, откуда возникла путаница. проблема # 1 находится на линии, где у sourceTD удален его дочерний элемент, проблема # 2 - когда lastChild удален из destinationTD.

Позвольте мне объяснить, как работает код ниже: a) когда в коде присутствует только строка выпуска # 1, дочерний объект sourceTD удаляется, в выводе говорится, что у источника есть 1 дочерний тип img; у пункта назначения есть 2 ребенка - img и текст ---- работает как ожидалось б) когда в коде присутствует только строка выпуска № 2, дочерний объект destinationTD удаляется, снова работает, как описано выше, как и ожидалось в) СЕЙЧАС ПРОБЛЕМА - когда обе строки присутствуют в коде, он удаляет только исходный TD lastChild. вывод получен только для части предупреждений sourceTD. Предупреждения destinationTD не приходят, поэтому я не могу оценить, был ли удален дочерний объект

КОД: 

function swapCells(sourceTD, destinationTD){

//line below is issue line#1 
sourceTD.removeChild(sourceTD.lastChild);  

//line below is issue line#2
destinationTD.removeChild(destinationTD.lastChild);

    if(sourceTD.hasChildNodes()){
        alert("Source has: " + sourceTD.childNodes.length);
        alert(sourceTD.childNodes[0].alt); 
        alert(sourceTD.childNodes[1].nodeName); 
    }
destinationTD.removeChild(destinationTD.lastChild);
    if(destinationTD.hasChildNodes()){
        alert("Destination has: " + destinationTD.childNodes.length);
        alert(destinationTD.childNodes[0].alt); 
        alert(destinationTD.childNodes[1].nodeName); 
    }
}

Пожалуйста, дайте мне знать, почему код работает неправильно, когда присутствуют обе строки проблемы. Кроме того, есть ли что-то вроде функции, которая может удалить только один узел, или что будет работать только один removeChild ... ????? Я в замешательстве.

Спасибо!

Ответы [ 3 ]

1 голос
/ 11 октября 2011

Sorted -> http://jsfiddle.net/zAVFv/3/

Первый дочерний узел TD является символом новой строки, а не элементом img .... увеличил числа на 1, и он работает нормально ... кажется немного неубедительным для использования всреда разработки - если вы не можете контролировать HTML - возможно, посмотрите на использование getelementbytagname('img') вместо?

0 голосов
/ 11 октября 2011

Аааа ... понял это.

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

Например, если у sourceTD есть 3 дочерних элемента, на которые ссылаются как childNodes [1], и childNodes [2], то после удаления lastChild из sourceTD больше не будет childNodes [2],так как осталось только 2 и третьего узла больше нет.В результате этой ошибки в JS оставшийся код каким-то образом подавляется и не запускается.поэтому это и является причиной того, что предупреждения destinationTD также подавляются.

Глупые ссылки ..!

Спасибо всем, особенно @ManseUK за помощь

0 голосов
/ 11 октября 2011

Когда у вас есть обе линии, вы в итоге дважды набираете destinationTD.removeChild(destinationTD.lastChild);, так что оба потомка удаляются.Тогда ваш оператор if оценивается как ложный, потому что destinationTD не имеет дочерних узлов, поэтому вы не получите ничего на выходе - в этом случае отсутствие вывода является доказательством того, что код работает, а не доказательством того, что он НЕТ.

...