Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

Как да изтрия елемент в Javascript

Нова тема

16 август 201510 г.

Здравейте,

Опитвам се да изтрия input type="checkbox" в Javascript, но не се получава. Търсих информация в Интернет, но не работи. Целта ми е да изтрия всяка чекната кутийка да бъде изтрита. Това е кодът,който съм написал досега.

function createTask(){

  			var id = 1;
  			var firstColor = "rgb(250,250,250)";

  			var taskNameInput = document.getElementById("taskName").value;
			var taskDateInput = document.getElementById("taskDate").value;
			var taskTimeInput = document.getElementById("taskTime").value;


			/* Create the html of the task */

			var task = document.createElement("DIV");

			task.id = id;

			var taskName = document.createTextNode(taskNameInput);
			var taskDate = document.createTextNode(taskDateInput);
			var taskTime = document.createTextNode(taskTimeInput);

			taskNameDiv = document.createElement("DIV");
			taskNameDiv.style.marginLeft = "10px";
			taskNameDiv.style.marginRight = "10px";
			taskNameDiv.style.display = "inline-block";

			taskDateDiv = document.createElement("DIV");
			taskDateDiv.style.marginLeft = "10px";
			taskDateDiv.style.marginRight = "10px";
			taskDateDiv.style.display = "inline-block";

			taskTimeDiv = document.createElement("DIV");
			taskTimeDiv.style.paddingLeft = "10px";
			taskTimeDiv.style.paddingRight = "10px";
			taskTimeDiv.style.display = "inline-block";

			taskNameDiv.appendChild(taskName);
			taskDateDiv.appendChild(taskDate);
			taskTimeDiv.appendChild(taskTime);

			// Create checkbox

			var checkBox = document.createElement("input");

			checkBox.type="checkbox";
			checkBox.id = id;

		//	checkbox.addEventListener("checked", deleteTask, false);

			task.appendChild(checkBox);
			task.appendChild(taskNameDiv);
			task.appendChild(taskDateDiv);
			task.appendChild(taskTimeDiv);

			task.style.width= "100%";
			task.style.height = "50px";


			task.style.backgroundColor = firstColor;
			document.getElementById("container").appendChild(task);




	  		}


	  		function deleteTask(){

	  			var task = document.getElementById("task");
	  			var checkBoxes = document.querySelectorAll('input[type="checkbox"]:checked');

	  			task.removeChild(checkBoxes);


	  			


	  		}

Някакви предложения?

Редактирано 16 август 201510 г. от frozener (преглед на промените)

Цитирай

16 август 201510 г.

Може ли и HTML-a, че не ми се занимава да го съчинявам.

Цитирай

16 август 201510 г.

Автор

<body>

		<div id="logo">
			Simple task manager
		</div>
		<div id="container">

			<div class="title">
				Welcome, <? print_r($_SESSION["username"]); ?>
				
			</div>

				<input type="text" id="taskName" name="taskName" />
				<input type="text" id="taskDate" name="taskDate" />
				<input type="text" id="taskTime" name="taskTime" />


				<input type="submit" name="submit" id="submit" onclick="createTask()" value="Create Task" />
				<input type="submit" name="delete" id="delete" onclick="deleteTask()" value="Delete" />
		
		</div>



</body>

Разбира се, че може.

Цитирай

16 август 201510 г.

Написах набързо нещата. Ето тук може да видиш кода.

Предположих, че искаш да изтриеш задача, която е маркирана като завършена. Направил съм го с отделен бутон, но ако държиш, ще се помъча да прихвана самия event на check-ване.

Редактирано 16 август 201510 г. от AxCx (преглед на промените)

Цитирай

16 август 201510 г.

Автор

Написах набързо нещата. Ето тук може да видиш кода.

Предположих, че искаш да изтриеш задача, която е маркирана като завършена. Направил съм го с отделен бутон, но ако държиш, ще се помъча да прихвана самия event на check-ване.

Значи чрез слагане на празен низ в Outer HTML ти е решението? Иначе мисля, че формата ти пречи на рендерирането на текста, аз затова я изтрих в моята версия на кода. Мерси за кода ще го прочета по-подробно.

Редактирано 16 август 201510 г. от frozener (преглед на промените)

Цитирай

16 август 201510 г.

Значи чрез слагане на празен низ в Outer HTML ти е решението? Иначе мисля, че формата ти пречи на рендерирането на текста, аз затова я изтрих в моята версия на кода. Мерси за кода ще го прочета по-подробно.

При Firefox innerText за div явно не работи, в случая трябва да се използва createTextNode() или innerHTML (което за данни въведни от потребителя не е много препоръчително).

При изтриване на елементи чрез променяне на inner/outerHTML може да се създаде memory leak, ако за тези елементи е имало закачени event handlers. В такъв случай е по-добре да се използва следното:

while ( elem.firstChild ) {
    elem.removeChild( elem.firstChild );
}

Цитирай

Архивирана тема

Темата е твърде стара и е архивирана. Не можете да добавяте нови отговори в нея, но винаги можете да публикувате нова тема, в която да продължи дискусията. Регистрирайте се или влезте във вашия профил за да публикувате нова тема.