Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Посоветуйте как сделать.. (https://javascript.ru/forum/misc/31044-posovetujjte-kak-sdelat.html)

dmitry111 24.08.2012 14:54

Посоветуйте как сделать..
 
Вот есть функция, которая создает новые элементы, предположим так:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>выпвып</title>
</head>

<body>
<button>создать новый элемент</button>
<!--<button>удалить последнее действие функции go()</button>-->
<script>

    var w = window.innerWidth - 20;
    var h = window.innerHeight - 20;

    function go() {
        function colorw() {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);

            return "rgb(" + r + ", " + g + ", " + b + ")";
        }
        var a = document.createElement("div");
        a.style.width = "20px";
        a.style.height = "20px";
        a.style.position = "absolute";
        a.style.borderRadius = "5px";
        a.style.top = Math.round(Math.random()*h) + "px";
        a.style.left = Math.round(Math.random()*w) + "px";
        a.style.background = colorw();
        document.body.appendChild(a);

    }

    var b = document.getElementsByTagName("button")[0];
    b.addEventListener("click", go);

</script>
</body>
</html>


При клике на кнопку, создается новый элемент.

Хотелось бы написать функцию, которая удаляла предыдущее действие вышенаписанной функции.

Подскажите, как это сделать?

dmitry111 24.08.2012 14:56

не имею в виду, чтоб удалила последний элемент в body, а именно удалила последнее действие!!!

Deff 24.08.2012 15:08

dmitry111,
:) Cоздайте объект с записью последних действий ?

lord2kim 24.08.2012 15:12

dmitry111, добавьте к создаваемому divid и записывайте таковой в переменную (или массив), в последствии доставайте id из переменной (или последний элемент из массива) и удаляйте элемент...
если нужна история создания элементов пообширнее, то используйте, как предложил Deff, объект

bes 24.08.2012 15:56

Цитата:

Сообщение от dmitry111
не имею в виду, чтоб удалила последний элемент в body, а именно удалила последнее действие!!!

все дивы можно поместить в отдельный див и удалять последний созданный див из него

dmitry111 24.08.2012 16:02

не могу понять как это можно реализовать с помощью созданного объекта.

Из примера выше действие функции заключается в 3-х составляющих: создать элемент, создать свойства для этого элемента и поместить его в body.

То есть мне нужно создать объект с 3-мя литералами. И Если мне нужно удалить действие функции - удалить этот объект?

:blink:


Если не затруднит, покажите какой-нибудь пример.




lord2kim,

способ, описанный вами, понятен. Но мне это надо для функции, которая не элементы создает. Пример выше просто пример

melky 24.08.2012 16:03

можно просто записывать в массив добавленные элементы. какие нафиг объекты\родители?

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>выпвып</title>
</head>

<body>
<button>создать новый элемент</button>
<button>удалить все</button>
<button>удалить последний</button>
<!--<button>удалить последнее действие функции go()</button>-->
<script>

    var w = window.innerWidth - 20;
    var h = window.innerHeight - 20;
    var els = [];

    function go() {
        function colorw() {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);

            return "rgb(" + r + ", " + g + ", " + b + ")";
        }
        var a = document.createElement("div");
        a.style.width = "20px";
        a.style.height = "20px";
        a.style.position = "absolute";
        a.style.borderRadius = "5px";
        a.style.top = Math.round(Math.random()*h) + "px";
        a.style.left = Math.round(Math.random()*w) + "px";
        a.style.background = colorw();
        document.body.appendChild(a);
        els.push(a);
    }
  
    function remove_one () {
        if (els.length) {
            var el = els.pop();
            el.parentNode.removeChild(el);
        }
    }
  
    function remove_all () {
        while (els.length) {
          remove_one();
        }
    }
    

    var b = document.getElementsByTagName("button")[0];
    b.addEventListener("click", go, false);

    var b = document.getElementsByTagName("button")[1];
    b.addEventListener("click", remove_all, false);
  
    var b = document.getElementsByTagName("button")[2];
    b.addEventListener("click", remove_one, false);
</script>
</body>
</html>

dmitry111 24.08.2012 16:04

bes,

вы издеваетесь :D

dmitry111 24.08.2012 16:05

melky,

вот , это мне нужно!!! Спасибо!

bes 24.08.2012 16:18

Цитата:

Сообщение от dmitry111
bes,

вы издеваетесь

Так-то нет

<button>создать новый элемент</button>
<button>удалить все</button>
<button>удалить последний</button>
<div id="div"></div>

<script>
window.onload = function () {
	var div = document.getElementById('div');
	var w = window.innerWidth - 20;
	var h = window.innerHeight - 20;

	function colorw() {
		var r = Math.floor(Math.random()*256);
		var g = Math.floor(Math.random()*256);
		var b = Math.floor(Math.random()*256);
		return "rgb(" + r + ", " + g + ", " + b + ")";
	}
	
	function create()  {
		var a = document.createElement("div");
		a.style.width = "20px";
		a.style.height = "20px";
		a.style.position = "absolute";
		a.style.borderRadius = "5px";
		a.style.top = Math.round(Math.random()*h) + "px";
		a.style.left = Math.round(Math.random()*w) + "px";
		a.style.background = colorw();
		div.appendChild(a);
	}
	
	document.body.children[0].onclick = function () {
		create();
	}
	
	document.body.children[1].onclick = function () {
		div.innerHTML = '';
	}
	
	document.body.children[2].onclick = function () {
		if (div.lastChild) {
			div.removeChild(div.lastChild);
		}
	}
	
}
</script>


Часовой пояс GMT +3, время: 12:04.