Форум

sonntagausgang · #1 (**permalink**) 08.01.2014, 19:48

Привет. Помогите решить задачу есть конструкция

<div>
  <div style="float:left;"></div>
  <div style="float:left;"></div>
  <div>delete</div>
</div>
<div>
  <div style="float:left;"></div>
  <div style="float:left;"></div>
  <div>delete</div>
</div>

Как сделать так чтобы при клике на третий див delete можно было удалить весь div который обхватывает три внутренних.

Или это удобнее сделать с помощь таблиц.

рони · #2 (**permalink**) 08.01.2014, 20:14

sonntagausgang,
http://learn.javascript.ru/modifying...в-removechild

sonntagausgang · #3 (**permalink**) 08.01.2014, 21:56

Сообщение от рони

sonntagausgang,
http://learn.javascript.ru/modifying...в-removechild

спасибо разобрался.

рони · #4 (**permalink**) 08.01.2014, 22:08

sonntagausgang,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <style type="text/css">
div > div{
   background: #0000FF;
   color: #FFFFFF;
   width: 60px;
   margin: 8px;
   float:left;
 }
div > div:last-child{
  background: #FF0000;
}

  </style>
</head>

<body>
<div>
  <div style="float:left;">1</div>
  <div style="float:left;">2</div>
  <div>delete</div>
</div>
<div>
  <div style="float:left;">3</div>
  <div style="float:left;">4</div>
  <div>delete</div>
</div>
<script>
var c = document.querySelectorAll("div > div:last-child");
Array.prototype.forEach.call(c, function (a) {
    a.onclick = function () {
        var b = a.parentNode;
        b.parentNode.removeChild(b)
    }
});
</script>
</body>
</html>

sonntagausgang · #5 (**permalink**) 09.01.2014, 00:24

Сообщение от рони

sonntagausgang,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <style type="text/css">
div > div{
   background: #0000FF;
   color: #FFFFFF;
   width: 60px;
   margin: 8px;
   float:left;
 }
div > div:last-child{
  background: #FF0000;
}

  </style>
</head>

<body>
<div>
  <div style="float:left;">1</div>
  <div style="float:left;">2</div>
  <div>delete</div>
</div>
<div>
  <div style="float:left;">3</div>
  <div style="float:left;">4</div>
  <div>delete</div>
</div>
<script>
var c = document.querySelectorAll("div > div:last-child");
Array.prototype.forEach.call(c, function (a) {
    a.onclick = function () {
        var b = a.parentNode;
        b.parentNode.removeChild(b)
    }
});
</script>
</body>
</html>

Спасибо за ответ.
Я сделал так.

var elem =  document.getElementById('content');

      elem.addEventListener('click', function(e) { 
          var dsf = e.target.parentNode;
          elem.removeChild(dsf);

Как лучше? Как вы сделали или как я?

рони · #6 (**permalink**) 09.01.2014, 00:29

sonntagausgang,
а клик по первым дивам тоже удаляет ?

sonntagausgang · #7 (**permalink**) 09.01.2014, 00:41

Сообщение от рони

sonntagausgang,
а клик по первым дивам тоже удаляет ?

а все я понял в чем разница. Точно удаляет по кликам по первым дивам. Спасибо.
Буду значит в вашем коде разбираться.

Форум

Справочник

Discord чат

Курсы javascript