Динамическое удаление элемента
Здравствуйте.
Подскажите пожалуйста. Есть такой кусочек кода:
var d=document.createElement('div');
d.style.width='100%';
d.style.height='20px';
d.style.background=' lightgreen ';
document.body.appendChild(d);
var li = document.createElement('LI')
li.innerHTML = j+' Вопрос: верно'
d.appendChild(li)
Как теперь при нажатии в на кнопку удалять этот div со всем что внутри. И возможно ли вообще? Делаю маленький тест, и нужно очищать внизу поле с правильно/не правильно, чтобы если много раз нажимают, не накапливалось. |
Зыкин Илья,
зависит от задачи...будет ли этот div единственный или их может быть много... d.id = "id";
<input type="button" value="Delete" onClick="javascript:document.getElementById('id').parentNode.removeChild(d);">
приведите HTML и остальную часть JS |
Просьба сильно не критиковать сам способ реализации, ибо профан.
Но буду очень благодарен конкретным примерам как лучше и почему(особенно советам, как сократить и оптимизировать код). И что можно, а чего не стоит использовать. Приведу весь документ:
<html>
<head>
<title>Тест</title>
<script>
function voprtrue()
{
var check;
var j;
var i;
for (j=1; j<4; j++)
{
var d=document.createElement('div');
d.style.width='100%';
d.style.height='20px';
check = 0;
for (i=0; i<document.getElementsByName("v"+j+"").length; i++)
{
if (document.getElementsByName("v"+j+"")[i].checked)
{
check = 1;
if (document.getElementsByName("v"+j+"")[i].value == 1)
{
d.style.background=' lightgreen ';
document.body.appendChild(d);
var li = document.createElement('LI')
li.innerHTML = j+' вопрос: верно'
d.appendChild(li)
}
else
{
d.style.background=' red ';
document.body.appendChild(d);
var li = document.createElement('LI')
li.innerHTML = j+' вопрос: не верно'
d.appendChild(li)
}
}
}
if (check == 0)
{
d.style.background=' #B1BBC6 ';
document.body.appendChild(d);
var li = document.createElement('LI')
li.innerHTML = j+' вопрос: пропущен!'
d.appendChild(li)
}
}
}
</script>
</head>
<body>
<div id="questions">
<p>Медиа-мониторинг это ...<br></p>
<input name=v1 type="radio">это отслеживание ключевых слов и выражений по открытым источникам, подобранных профессионалами по заказу клиента.<br>
<input name=v1 type="radio" value="1">Это круглосуточный просмотр медиа-файлов<br>
<input name=v1 type="radio">Это наблюдение за статистикой просмотров медиа-контента в сети<br>
<input name=v1 type="radio">Анализ медиа-контента на сайте<br>
<hr>
<p>Медиа-мониторинг это ...<br></p>
<input name=v2 type="radio" value="1">это отслеживание ключевых слов и выражений по открытым источникам, подобранных профессионалами по заказу клиента.<br>
<input name=v2 type="radio">Это круглосуточный просмотр медиа-файлов<br>
<input name=v2 type="radio">Это наблюдение за статистикой просмотров медиа-контента в сети<br>
<input name=v2 type="radio">Анализ медиа-контента на сайте<br>
<hr>
<p>Медиа-мониторинг это ...<br></p>
<input name=v2 type="radio">это отслеживание ключевых слов и выражений по открытым источникам, подобранных профессионалами по заказу клиента.<br>
<input name=v2 type="radio">Это круглосуточный просмотр медиа-файлов<br>
<input name=v2 type="radio">Это наблюдение за статистикой просмотров медиа-контента в сети<br>
<input name=v2 type="radio" value="1">Анализ медиа-контента на сайте<br>
<hr>
</div>
<button onclick="voprtrue();">Закончить тест</button>
</body>
</html>
|
Цитата:
<html>
<head>
<title>Тест</title>
<script>
function voprtrue()
{
var check;
var j;
var i;
if (document.getElementById("id1")) {
return alert("Результаты уже отображены");
} else {
for (j=1; j<4; j++)
{
var d=document.createElement('div');
d.id = "id"+j;
d.style.width='100%';
d.style.height='20px';
check = 0;
for (i=0; i<document.getElementsByName("v"+j+"").length; i++)
{
if (document.getElementsByName("v"+j+"")[i].checked)
{
check = 1;
if (document.getElementsByName("v"+j+"")[i].value == 1)
{
d.style.background=' lightgreen ';
document.body.appendChild(d);
var li = document.createElement('LI')
li.innerHTML = j+' вопрос: верно'
d.appendChild(li)
}
else
{
d.style.background=' red ';
document.body.appendChild(d);
var li = document.createElement('LI')
li.innerHTML = j+' вопрос: не верно'
d.appendChild(li)
}
}
}
if (check == 0)
{
d.style.background=' #B1BBC6 ';
document.body.appendChild(d);
var li = document.createElement('LI')
li.innerHTML = j+' вопрос: пропущен!'
d.appendChild(li)
}
}
}
}
function deleteResults() {
for (j=1; j<4; j++) {
document.getElementById("id"+j).parentNode.removeChild(document.getElementById("id"+j));
}
}
</script>
</head>
<body>
<div id="questions">
<p>Медиа-мониторинг это ...<br></p>
<input name=v1 type="radio">это отслеживание ключевых слов и выражений по открытым источникам, подобранных профессионалами по заказу клиента.<br>
<input name=v1 type="radio" value="1">Это круглосуточный просмотр медиа-файлов<br>
<input name=v1 type="radio">Это наблюдение за статистикой просмотров медиа-контента в сети<br>
<input name=v1 type="radio">Анализ медиа-контента на сайте<br>
<hr>
<p>Медиа-мониторинг это ...<br></p>
<input name=v2 type="radio" value="1">это отслеживание ключевых слов и выражений по открытым источникам, подобранных профессионалами по заказу клиента.<br>
<input name=v2 type="radio">Это круглосуточный просмотр медиа-файлов<br>
<input name=v2 type="radio">Это наблюдение за статистикой просмотров медиа-контента в сети<br>
<input name=v2 type="radio">Анализ медиа-контента на сайте<br>
<hr>
<p>Медиа-мониторинг это ...<br></p>
<input name=v2 type="radio">это отслеживание ключевых слов и выражений по открытым источникам, подобранных профессионалами по заказу клиента.<br>
<input name=v2 type="radio">Это круглосуточный просмотр медиа-файлов<br>
<input name=v2 type="radio">Это наблюдение за статистикой просмотров медиа-контента в сети<br>
<input name=v2 type="radio" value="1">Анализ медиа-контента на сайте<br>
<hr>
</div>
<button onclick="voprtrue();">Закончить тест</button><button onclick="deleteResults();">Удалить результаты</button>
</body>
</html>
но лучше рисуй все свои div-ы на каком-нибудь общем div-е... |
Большое спасибо.
|
Чтобы не плодить темы, спрошу тут же.
Есть у меня в том же скрипте условие
if (document.getElementsByName("v"+j+"")[0].value < tr_max)
{
...
}
Но не работает условие, я так понимаю из за того что он не понимает что это числа? Как ему указать что document.getElementsByName("v"+j+"")[0].value и tr_max это числа? P.S. Переменная tr_max объявлена сверху и присвоено значение 50 var tr_max = 50; В document.getElementsByName("v"+j+"")[0].value ввожу число. |
Цитата:
<script language="JavaScript">
var tr_max = 50;
function func() {
if (document.getElementById("id").value < tr_max) { alert("значение элемента < tr_max"); }
}
</script>
<input type="text" id="id" onkeypress="func()">
...getElementsByName("v"+j+"")[0]...
+"" абсолютно не к чему |
Ну да, я тоже думал что по идее не надо, но как то не заработал скрипт в какой то момент, думал в этом дело.
Спасибо, значит тут всё нормально. |
| Часовой пояс GMT +3, время: 09:57. |