JavaScript lastChild issue

Question

Когда я добавляю текст в текстовое поле до и после существующих абзацев, кнопка удаления отлично работает. Однако, если я нажимаю кнопку «Удалить» перед добавлением элементов, вы должны нажать «TWICE», чтобы удалить абзацы, которые не были созданы функцией.

Что может быть неправильным здесь? Я смотрю DOM в Firebug, когда добавляю и удаляю, и до того, как новые элементы будут добавлены, моя кнопка удаления не нацеливает «firstDiv» на первый клик, но делает это во втором клике.

Вот функция проблема:

function removeIt() { 
    firstDiv.removeChild(firstDiv.lastChild); 
} 

Вот скрипка: http://jsfiddle.net/nxpeD/2/

Спасибо за помощь!

Answer 1

Это потому, что у вас есть текстовые узлы (пробелы) в конце, поэтому последний абзац не является последним дочерним элементом (это последний дочерний элемент элемента).

Затем используйте

function removeIt() { 
    firstDiv.removeChild(firstDiv.lastElementChild); 
} 

Demo: http://jsfiddle.net/nxpeD/6/

Совместимость: Для того, чтобы заставить его работать на старых браузерах, вы можете также использовать

function removeIt() { 
    if (firstDiv.lastElementChild) { 
     firstDiv.removeChild(firstDiv.lastElementChild); 
    } else { 
     var last; 
     while((last = firstDiv.lastChild).nodeType !== 1) { 
      firstDiv.removeChild(last); 
     } 
     firstDiv.removeChild(last); 
    } 
} 

Ссылки

• lastChild
• lastElementChild

Answer 2

Использование:

firstDiv.removeChild(firstDiv.lastElementChild); 

Поскольку существует форматирование новых символов строки в вашем HTML, которые будут рассматриваться как ребенок, а из дел. Поэтому вам нужно использовать lastElementChild, чтобы получить элемент и игнорировать форматирование и другие текстовые узлы.

Demo

last_child возвращается является узлом. Если его родительский элемент является элементом, тогда ребенок, как правило, является элементом Element, текстовым узлом или узлом Comment. Возвращает null, если дочерних элементов нет.

lastElementChild