Простой OnClick не удается удалить дочерний узел

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script> 
window.onload = function() { 
    var oBtn = document.getElementById('btn1'); 
    var oTxt = document.getElementById('txt1'); 
    var oUl = document.getElementById('ul1'); 
    var aA = []; 

    oBtn.onclick = function() { 
    var oLi = document.createElement('li'); 
    var aLi = document.getElementsByTagName('li'); 

    // add <a> to li 
    oLi.innerHTML = oTxt.value + ' <a href="javascript:;">delete</a>'; 

    if (aLi.length > 0) { 
     oUl.insertBefore(oLi, aLi[0]); 
    } else { 
     oUl.appendChild(oLi); 
    } 

    // everytime add an li, add <a> which is in <li> to aA 
    aA.push(oLi.children[0]); 
    }; 

    for (var i = 0; i < aA.length; i++) { 
    aA[i].onclick = function() { 
     oUl.removeChild(this.parentNode); 
    } 
    } 
} 
</script> 
</head> 
<body> 
    <input id='txt1' type="text" /> 

    <!-- Add an li element --> 
    <input id="btn1" type="button" value="Add li" /> 
    <ul id="ul1"> 
    </ul> 
</body> 
</html>

Привет всем, я новичок JavaScript, и у меня есть проблемы в случае щелчка, после моя проблема:Простой OnClick не удается удалить дочерний узел

Когда я нажимаю oBtn.onclick, это создать li элемент до ul, затем innerHTML из li содержит тег «a» и помещается в массив с именем aA.

Однако в aA[i].onclick он не работает, и в чем проблема в моем коде?

источник

2016-09-05 nigel

Нет никакой попытки удалить элементы в обработчике кликов. Цикл, содержащий вызов 'removeChild', никогда не вызовет его, так как в этой точке' aA' пуст, поэтому тело цикла никогда не будет выполнено. –

Это связано с тем, что вы привязываете якорный клик до его создания. – Pete

Не совсем ясно, чего вы пытаетесь достичь. Ясно: какой код должен делать то, что вы делаете, какие результаты вы видите и какие результаты вы ожидали увидеть. –

Вы никогда не делает ничего, чтобы подключить событие обработчик на a элемент click. Смотрите комментарии:

window.onload = function() { 
 
    var oBtn = document.getElementById('btn1'); 
 
    var oTxt = document.getElementById('txt1'); 
 
    var oUl = document.getElementById('ul1'); 
 
    var aA = []; 
 

 
    oBtn.onclick = function() { 
 
    var oLi = document.createElement('li'); 
 
    var aLi = document.getElementsByTagName('li'); 
 

 
    // Create deletion link and hook it up 
 
    var a = document.createElement('a'); 
 
    a.href = "javascript:;"; 
 
    a.innerHTML = "delete"; 
 
    a.onclick = deleteOnClick; 
 

 
    // add text and <a> to li 
 
    // note the use of createTextNode, in case the user types something with < in it 
 
    oLi.appendChild(document.createTextNode(oTxt.value + " ")); 
 
    oLi.appendChild(a); 
 

 
    // Add at the beginning of the list 
 
    oUl.insertBefore(oLi, oUl.firstChild); 
 

 
    // everytime add an li, add <a> which is in <li> to aA 
 
    aA.push(oLi.children[0]); 
 
    }; 
 
    
 
    // Called by click handler to delete the clicked' element's parent 
 
    function deleteOnClick() { 
 
    var parent = this.parentNode; 
 
    parent.parentNode.removeChild(parent); 
 
    } 
 
};

<input id='txt1' type="text" /> 
 

 
    <!-- Add an li element --> 
 
    <input id="btn1" type="button" value="Add li" /> 
 
    <ul id="ul1"> 
 
    </ul>

Некоторые другие примечания:

onclick быстро и легко, но это не играет хорошо с другими. Посмотрите на использование современной обработки событий (addEventListner). Если вам необходимо поддерживать устаревшие браузеры, такие как IE8, см. this answer для функции, которая работает даже тогда, когда отсутствует addEventListener.
Загрузка сценариев в head (без использования async или defer) - это плохая практика. Не допуская причину сделать что-то еще, поместите их в конец тела документа непосредственно перед закрывающим тегом </body>.
load событие на window происходит очень поздно в процессе загрузки страницы, не дожидаясь, пока все изображения и таблицы стилей и другие внешние ресурсы по завершении загрузки. Не имея достаточных оснований ждать этого долго, подключить обработчиков раньше. Если вы поместите свой скрипт в конец body (см. № 2), вы можете сделать это прямо на верхнем уровне скрипта.
Обертывание кода в функции обзорного как это:
```
(function() { 
    // ...your code here... 
})(); 
```
сэкономит вам справедливый бит душевной боли, так как в противном случае все переменные и функции верхнего уровня являются Глобалы. Глобальное пространство имен уже слишком многолюдно, что создает проблемы конфликтов.
Изучите идею делегирования событий для ваших delete обработчиков. Вы можете обработать щелчок по элементу ul, а затем проверить, прошел ли он через ваш a элемент в пути при пузырьках. Это позволяет вам не беспокоиться о том, чтобы подключить его позже, когда вы создаете ссылку удаления.

источник

2016-09-05 15:19:12

Спасибо за ваш ответ! В вашем коде кажется, что в коде нет проблемы с порядком! Я многому учусь из вашего кода, спасибо! – nigel

Вы должны связать событие якорь щелчок после того, как якорь создан - вы пытаетесь связать его, прежде чем они созданы

window.onload = function() { 
 
    var oBtn = document.getElementById('btn1'); 
 
    var oTxt = document.getElementById('txt1'); 
 
    var oUl = document.getElementById('ul1'); 
 
    var aA = []; 
 

 
    oBtn.onclick = function() { 
 
    var oLi = document.createElement('li'); 
 
    var aLi = document.getElementsByTagName('li'); 
 

 
    // add <a> to li 
 
    oLi.innerHTML = oTxt.value + ' <a href="javascript:;">delete</a>'; 
 

 
    if (aLi.length > 0) { 
 
     oUl.insertBefore(oLi, aLi[0]); 
 
    } else { 
 
     oUl.appendChild(oLi); 
 
    } 
 

 
    // everytime add an li, add <a> which is in <li> to aA 
 
    // aA.push(oLi.children[0]);       <- don't think you need this array anymore 
 
    
 
    // bind your anchor click here 
 
    oLi.children[0].onclick = function() { 
 
     oUl.removeChild(this.parentNode); 
 
    } 
 
    }; 
 
}

<input id='txt1' type="text" /> 
 

 
    <!-- Add an li element --> 
 
    <input id="btn1" type="button" value="Add li" /> 
 
    <ul id="ul1"> 
 
    </ul>

источник

2016-09-05 15:16:42 Pete

Спасибо за ваш ответ! Оно работает! Но почему oLi.children [0] .onclick содержится в oBtn.onclick, они запускаются с помощью другой кнопки? – nigel

@nigel, потому что вы создаете 'oLi.children [0]' внутри 'oBtn', поэтому вам нужно привязать событие click, когда вы создали дочерний элемент, - вы не можете привязать его к чему-то, что не было создано поэтому ваш оригинал не прошел – Pete

Простой OnClick не удается удалить дочерний узел

ответ

Смежные вопросы