Наимудрейший рони,
подскажите, пожалуйста - перелопатил все открывашки/закрывашки, но не получается реализовать это: Необходимо удалить(закрыть) блок на кнопку "удалить" и удалить все блоки, нажав на кнопку "удалить все" Блоков будет "n" число:
<style type="text/css">
.div {
background: yellow;
width: 100px;
height: 100px;
float: left;
margin-right: 10px;}
</style>
<div class="div">
<button type="button" class="delite" onclick="viewed.remove('<?php echo $var; ?>');">удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" onclick="viewed.remove('<?php echo $var; ?>');">удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" onclick="viewed.remove('<?php echo $var; ?>');">удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
Точнее получается, но как всегда через ж)) с помощью i++ блокам применяю уникальный id и ... вообщем через ж...) Подскажите, пожалуйста - как можно проще все это реализовать? |
Anrew,
удалить? или скрыть? |
Лучше удалить)) Но можно и в display:none
|
Anrew,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.div {
background: yellow;
width: 100px;
height: 100px;
float: left;
margin-right: 10px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var delites = document.querySelectorAll('.delite'),
alldelite = document.querySelector('.alldelite');
[].forEach.call(delites, function(item) {
item.addEventListener('click', function() {
var body = document.querySelector('body');
body.removeChild(this.parentNode)
});
});
alldelite.addEventListener('click', function () {
[].forEach.call( document.querySelectorAll('.delite'), function(button) {
button.click()
});
});
});
</script>
</head>
<body>
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</body>
</html>
|
Огромное спасибо)) Очень помогли.
|
Рано радовался) На свою голову упростил верстку, а оказалось зря. Если все эти блоки будут обернуты в дивы, то скрипт выдает ошибку "Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
Вот, например, так уже не работает: <div class="top"> <div class="div"> <button type="button" class="delite" >удалить</button> 1</div> <div class="div"> <button type="button" class="delite" >удалить</button> 2</div> <div class="div"> <button type="button" class="delite" >удалить</button> 3</div> <button type="button" class="alldelite">удалить все</button> </div> А таких оберток будет много Рони, подскажите, пожалуйста - как в таком случае код должен выглядеть? |
Anrew,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.div {
background: yellow;
width: 100px;
height: 100px;
float: left;
margin-right: 10px;
}
.top{
height: 150px;
border: 2px solid #191970;
padding: 10px;
margin: 50px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var c = document.querySelectorAll(".delite"),
d = document.querySelectorAll(".alldelite");
[].forEach.call(c, function(a) {
a.addEventListener("click", function() {
var b = a.parentNode;
b.parentNode.removeChild(b)
})
});
[].forEach.call(d, function(a) {
a.addEventListener("click", function() {
var b = a.parentNode.querySelectorAll(".delite");
[].forEach.call(b, function(a) {
a.click()
})
})
})
});
</script>
</head>
<body>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
</body>
</html>
|
Это то что нужно. Огромное человеческое СПАСИБО))
|
Anrew,
скрпируйте скрипт по новой, немного уточнил. строка 35 |
| Часовой пояс GMT +3, время: 05:14. |