Как удалить div, в котором кнопка находится, когда нажата кнопка?

Я пытаюсь удалить div, когда нажата кнопка внутри него.Как удалить div, в котором кнопка находится, когда нажата кнопка?

HTML

<html> 
    <head> 
     <script src="test.js"></script> 
    </head> 
    <body> 
     <div class="image"> 
      <img src="http://i.imgur.com/VuKnN5P.jpg" alt="First"> 
      <button class="remove">X</button> 
     </div> 
     <div class="image"> 
      <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> 
      <button class="remove">X</button> 
     </div> 
    </body> 
</html>

Javascript

function registerClickHandler() { 
    // Register click event handler for button of class 'remove' 
    "use strict"; 
    var node = document.getElementsByClassName("image"); 
    if (node.parentNode) { 
     node.parentNode.removeChild(node); 
    } 
} 

var listen = document.getElementbyClassName("remove"); 
listen.addEventListener("click", registerClickHandler());

Так что, когда я нажимаю на кнопку 'X' внутри DIV, мне нужно, чтобы удалить весь родительский DIV, но кажется, что ничего, что я пробовал, будет работать. Я не уверен, может быть, я не использую обработчики событий правильно или нет, или что-то, что я делаю, просто совершенно неправильно. Я хотел бы сделать это, не используя jQuery (потому что я действительно не знаю его), если это возможно, но многие решения, которые я видел для смутно похожих проблем, все использовали jQuery.

Редактировать: Я забыл указать, что я ищу способ выполнить это с помощью eventHandlers.

источник

2016-10-20 UltimateSky

Это должно работать,

<html> 
<head> 
    <script src="test.js"></script> 
    <script type="text/javascript"> 
     function removeDiv(btn){ 
      ((btn.parentNode).parentNode).removeChild(btn.parentNode); 
     } 
    </script> 
</head> 
<body> 
    <div class="image"> 
     <img src="http://i.imgur.com/VuKnN5P.jpg" alt="First"> 
     <button class="remove" onclick="removeDiv(this);">X</button> 
    </div> 
    <div class="image"> 
     <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> 
     <button class="remove" onclick="removeDiv(this);">X</button> 
    </div> 
</body> 
</html>

источник

2016-10-20 03:13:34

Это работает, спасибо! Я специально искал способ использовать eventHandlers, но как форму практики, потому что я не лучший из них. – UltimateSky

Добро пожаловать. если вы хотите узнать больше о Javascript, я думаю [это из Mozilla] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction) и [this] (http: // javascript .info /) будет вам полезна. –

Ваш Javascript код возникают проблемы. Рабочий код

function registerClickHandler() { 
 
    // Register click event handler for button of class 'remove' 
 
    "use strict"; 
 
    this.parentNode.parentNode.removeChild(this.parentNode); 
 
} 
 
var listen = document.getElementsByClassName("remove"); 
 
var i; 
 
for (i = 0; i < listen.length; i++) { 
 
\t listen[i].addEventListener("click", registerClickHandler); 
 
}

<div class="image"> 
 
      <img src="http://i.imgur.com/VuKnN5P.jpg" alt="First"> 
 
      <button class="remove">X</button> 
 
     </div> 
 
     <div class="image"> 
 
      <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> 
 
      <button class="remove">X</button> 
 
     </div>

Теперь вопросы

вызов функции неправильно в вар слушать = document.getElementbyClassName ("удалить");
Функция возвращает массив. вы должны зациклиться на нем.
Чтобы обратиться к элементу кликнули в функции нужно использовать этот
Последний удалить родительский элемент, который нужно передать родителя родителя. Затем удалите this.parent.

источник

2016-10-20 03:14:16

Ах, тупая ошибка в синтаксисе. По какой-то причине, когда я запускаю свой код из этого окна, он отлично работает, но когда я копирую его в локальный файл, он перестает работать. Я запускал его в хроме одновременно. – UltimateSky

getElementbyClassName - неправильный синтаксис. Вы ищете getElementsByClassName. Это возвращает массив, подобный объекту (HTMLCollection), а не узел, и вам нужно будет применить прослушиватель событий к каждому элементу отдельно. Вам также не нужно использовать removeChild. Это немного лишнее.

var els = document.getElementsByClassName('remove'); 
 

 
for (var i = 0; i < els.length; i++) { 
 
    els[i].addEventListener('click', function() { 
 
    this.parentNode.remove(); 
 
    }); 
 
}

<div class="image"> 
 
    <img src="http://i.imgur.com/VuKnN5P.jpg" alt="First"> 
 
    <button class="remove">X</button> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> 
 
    <button class="remove">X</button> 
 
</div>

источник

2016-10-20 03:29:16 Damon

Вы можете попробовать это

<html> 
    <head> 
     <script src="test.js"></script> 
    </head> 
    <body> 
     <div class="image"> 
      <img src="http://i.imgur.com/VuKnN5P.jpg" alt="First"> 
      <button class="remove">X</button> 
     </div> 
     <div class="image"> 
      <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> 
      <button class="remove">X</button> 
     </div> 
     <script type="text/javascript"> 
      function removeParent() { 
       this.parentNode.remove(); 
      } 
      var buttons = document.getElementsByClassName('remove'); 
      Array.prototype.forEach.call(buttons, function(d, i) { 
       d.addEventListener('click', removeParent); 
      }); 
     </script> 
    </body> 
</html>

источник

2016-10-20 04:52:06 arlendp

Когда я пробовал этот код, он не работал для меня, кнопка не делала ничего – UltimateSky

Самый простой способ удалить родительский элемент

function removeParent(parent) { 
 
\t parent.remove(); 
 
}

<html> 
 
    <head> 
 
     <script src="test.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="image"> 
 
      <img src="http://i.imgur.com/VuKnN5P.jpg" alt="First"> 
 
      <button class="remove" onclick ="removeParent(this.parentNode)">X</button> 
 
     </div> 
 
     <div class="image"> 
 
      <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> 
 
      <button class="remove" onclick ="removeParent(this.parentNode)">X</button> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-10-20 06:31:36

Похоже, что тег кнопки не имеет функции onclick. Для этого вам нужно самостоятельно вызвать функцию. Вот мой ответ.

(function registerClickHandler() { 
    var classLength = document.getElementsByClassName("remove").length; 
    for(var i = 0; i<classLength; i++){ 
    document.getElementsByClassName("remove") 
    [i].addEventListener("click",function(current){ 
     current.srcElement.parentElement.remove(); 
    }); 
    } 
})();

источник

2017-10-18 05:02:06 Jeffery

попробовать это ...

const registerClickHandler =() => { 
x = document.getElementsByClassName("remove") 
for(var i = 0; i<x.length; i++){ 
      x[i].addEventListener("click",function(current){ 
       current.srcElement.parentElement.remove(); 
      }); 
      } 
     }

источник

2017-12-10 09:06:35

Как удалить div, в котором кнопка находится, когда нажата кнопка?

ответ

Смежные вопросы