单击按钮时如何删除按钮所在的div？

Question

I am trying to remove a div when the button inside of it is clicked.当点击里面的按钮时，我试图删除一个 div。

HTML 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 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());

So when I click the 'X' button inside of the div, I need it to remove the entire parent div, but it seems like nothing I've tried will work.因此，当我单击 div 内的“X”按钮时，我需要它来删除整个父 div，但似乎我尝试过的任何方法都不起作用。 I'm not sure if maybe I'm not using event handlers the right way or not, or if something I'm doing is just completely wrong.我不确定我是否没有以正确的方式使用事件处理程序，或者我正在做的事情是否完全错误。 I would like to do this without using jQuery (because I don't really know it) if possible, but a lot of the solutions I've seen for vaguely similar problems have all used jQuery.如果可能的话，我想在不使用 jQuery 的情况下执行此操作（因为我并不真正了解它），但是我看到的很多解决类似问题的解决方案都使用了 jQuery。

Edit: I forgot to specify that I am looking for a way to accomplish this using eventHandlers .编辑：我忘了说明我正在寻找一种使用eventHandlers来完成此操作的方法。

Answer 1

Try Element.closest() you can change element selector by pref尝试Element.closest()您可以通过 pref 更改元素选择器

"The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null." “ Element.closest()方法返回与参数中给出的选择器匹配的当前元素（或当前元素本身）的最近祖先。如果没有这样的祖先，则返回 null。”

mind that with a "proper selector" you don't have to worry about the parent or grandparent on elements selection请注意，使用“适当的选择器”，您不必担心元素选择的父级或祖父级

Here is an example.这是一个例子。

function setup() {
    var els = document.getElementsByClassName("remove");
    for (var i = 0; i < els.length; i++) {
        els[i].addEventListener('click', function (e) {
            e.preventDefault();
            e.target.closest('div.image').remove();
        });
    }
}
setup();

 img { width:100px; height:100px; }

 <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> <div class="image"> <div> <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> <button class="remove">X</button> </div> </div> <div class="image"> <div> <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> <button class="remove">X</button> </div> </div> <script> function setup() { var els = document.getElementsByClassName("remove"); for (var i = 0; i < els.length; i++) { els[i].addEventListener('click', function (e) { e.preventDefault(); e.target.closest('div.image').remove(); //e.target.closest('.image').remove(); //this will not work on 2 last images cause parent div will be deleted //leaving an empty <div class="image"></div> for each removed item //e.target.closest('div').remove(); }); } } setup(); </script>

Answer 2

getElementbyClassName is the wrong syntax. getElementbyClassName是错误的语法。 You're looking for getElementsByClassName .您正在寻找getElementsByClassName 。 This returns an array like object (HTMLCollection), not a node, and you will need to apply the event listener to each element individually.这将返回一个类似对象 (HTMLCollection) 的数组，而不是一个节点，您需要将事件侦听器单独应用于每个元素。 You also don't need to use removeChild .您也不需要使用removeChild 。 That's a bit redundant.这有点多余。

 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>

Answer 3

This should work,这应该有效，

<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>

Answer 4

Using Jquery使用 Jquery

 element = $(".remove"); for (var i in element) { element.on('click', function() { $(this).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">X</button> </div> <div class="image"> <img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second"> <button class="remove">X</button> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>

Answer 5

Your javascript code is having issues.您的 javascript 代码有问题。 The working code is工作代码是

 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++) { 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>

Now, Issues现在，问题

wrong function call at var listen = document.getElementbyClassName("remove"); var listen = document.getElementbyClassName("remove")处的错误函数调用；
Function returns an array.函数返回一个数组。 you have to loop over it.你必须遍历它。
To refer to clicked element in function need to use this要在功能中引用被点击的元素需要使用这个
Last to remove parent element you need to refer parent of parent.最后要删除父元素，您需要引用父元素的父元素。 Then remove this.parent .然后删除this.parent 。

. .

Answer 6

You can try this你可以试试这个

<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>

Answer 7

Easiest way to remove the parent element删除父元素的最简单方法

 function removeParent(parent) { 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>

Answer 8

It looks like the button tag does not have onclick function.看起来按钮标签没有 onclick 功能。 For this, you need to self invoke function.为此，您需要自调用函数。 Here is my answer.这是我的答案。

(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();
   });
  }
 })();

Answer 9

try this...试试这个...

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

Answer 10

I prefer this approach:我更喜欢这种方法：

<button type="button" onclick="return this.parentNode.remove();">Remove</button>

Also works if the parent element and its children were dynamically created.如果父元素及其子元素是动态创建的，也可以使用。

单击按钮时如何删除按钮所在的div？

问题描述

10 个解决方案

解决方案1
5 2018-10-18 16:00:14

解决方案2
2 2016-10-20 03:29:16

解决方案3
1 2016-10-20 03:13:34

解决方案4
1 2018-03-27 21:50:39

解决方案5
0 2016-10-20 03:14:16

解决方案6
0 2016-10-20 04:52:06

解决方案7
0 2016-10-20 06:31:36

解决方案8
0 2017-10-18 05:02:06

解决方案9
0 2017-12-10 09:06:35

解决方案10
0 2020-10-06 12:46:18

单击按钮时如何删除按钮所在的div？

问题描述

10 个解决方案

解决方案1 5 2018-10-18 16:00:14

解决方案2 2 2016-10-20 03:29:16

解决方案3 1 2016-10-20 03:13:34

解决方案4 1 2018-03-27 21:50:39

解决方案5 0 2016-10-20 03:14:16

解决方案6 0 2016-10-20 04:52:06

解决方案7 0 2016-10-20 06:31:36

解决方案8 0 2017-10-18 05:02:06

解决方案9 0 2017-12-10 09:06:35

解决方案10 0 2020-10-06 12:46:18

解决方案1
5 2018-10-18 16:00:14

解决方案2
2 2016-10-20 03:29:16

解决方案3
1 2016-10-20 03:13:34

解决方案4
1 2018-03-27 21:50:39

解决方案5
0 2016-10-20 03:14:16

解决方案6
0 2016-10-20 04:52:06

解决方案7
0 2016-10-20 06:31:36

解决方案8
0 2017-10-18 05:02:06

解决方案9
0 2017-12-10 09:06:35

解决方案10
0 2020-10-06 12:46:18