Форум

Anrew · #11 (**permalink**) 14.11.2015, 17:45

Наимудрейший рони,
подскажите, пожалуйста - перелопатил все открывашки/закрывашки, но не получается реализовать это:

Необходимо удалить(закрыть) блок на кнопку "удалить" и удалить все блоки, нажав на кнопку "удалить все"
Блоков будет "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 и ... вообщем через ж...)

Подскажите, пожалуйста - как можно проще все это реализовать?

рони · #12 (**permalink**) 14.11.2015, 18:20

Anrew,
удалить? или скрыть?

Anrew · #13 (**permalink**) 14.11.2015, 18:24

Лучше удалить)) Но можно и в display:none

рони · #14 (**permalink**) 14.11.2015, 18:36

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>

Anrew · #15 (**permalink**) 14.11.2015, 18:45

Огромное спасибо)) Очень помогли.

Anrew · #16 (**permalink**) 14.11.2015, 20:48

Рано радовался) На свою голову упростил верстку, а оказалось зря. Если все эти блоки будут обернуты в дивы, то скрипт выдает ошибку "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>

А таких оберток будет много
Рони, подскажите, пожалуйста - как в таком случае код должен выглядеть?

рони · #17 (**permalink**) 14.11.2015, 21:21

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 · #18 (**permalink**) 14.11.2015, 22:04

Это то что нужно. Огромное человеческое СПАСИБО))

рони · #19 (**permalink**) 14.11.2015, 22:15

Anrew,
скрпируйте скрипт по новой, немного уточнил. строка 35

Форум

Справочник

Discord чат

Курсы javascript