2013-11-17 2 views
0

Я просто изучаю javascript. Тестирование материал на Google Chrome консоли я в конечном итоге с этим:removeChild with addEventListener

<html> 

<head></head> 
<body> 

<div id="divi"> 

<button id="butti">Click Me</button> 

</div> 
</body> 
</html> 

И Js:

function cBoton(){ 
var getDiv = document.getElementById("divi"); 
    getDiv.removeChild(getDiv.lastChild); 
}; 

var getButton = document.getElementById("butti"); 
getButton.addEventListener("click", cBoton); 

Я ожидаю, что кнопка будет удалена после того, как одним щелчком мыши. ¿Почему работает только после второго щелчка?

tx!

+0

Попробуйте положить 'console.log (getDiv.lastChild)' в 'cBoton', прежде чем вы вызовете' removeChild'. – Barmar

+0

вместо 'lastChild', было бы лучше, если вы используете' lastElementChild', и если вы хотите удалить кнопку при нажатии на нее, возможно, было бы лучше использовать 'function cBoton (e) {e.target.parentElement. RemoveChild (e.target); } ' – Givi

ответ

0

Элемент в вашей разметке "" (попробуйте console.log(getDiv.lastChild), чтобы уточнить).

Используйте это, чтобы быть уверенным, что вы удаляете нужный элемент:

function cBoton() { 
    var getDiv = document.getElementById("divi"); 
    getDiv.removeChild(getButton); 
}; 
0

На первый щелчок, последний ребенок divi является текстовый узел, содержащий пробелы после кнопки, и это становится удалены. При втором нажатии кнопка является последним дочерним элементом.

0

Неоценимый ..

Изменен источник;

/* .css */ 

div :nth-child(even){background-color: #f2f2f2} 

/*.js */ 

function addDiv() { 
var para = document.createElement("p"); 
var node = document.createTextNode('textHere'); // add cell code here 
para.appendChild(node); 
var element; 
element = document.getElementById("div1"); // to add div id recursion 
element.appendChild(para); 
} 

function cBoton(){ 
var getDiv = document.getElementById("div1"); 
getDiv.removeChild(getDiv.lastChild); 
} 

var getButton = document.getElementById("div1"); 
getButton.addEventListener("click", cBoton); 

/* HTML */ 

<html> 
<head></head> 
<body> 
<button onclick="addDiv()">add</button> 
<button onclick="cBoton()">Click Me</button> 
<frameset><legend>recursions</legend> 
<div id="div1"></div> 
</frameset> 
</body> 
</html>