javascript - How to remove the div that a button is contained in when the button is clicked?

I am trying to remove a div when the button inside of it is clicked.

HTML

<html>
    <head>
        <script src="test.js"></script>
    </head>
    <body>
        <div class="image">
            <img src=".jpg" alt="First">
            <button class="remove">X</button>
        </div>
        <div class="image">
            <img src=".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());

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

Edit: I forgot to specify that I am looking for a way to accomplish this using eventHandlers.

I am trying to remove a div when the button inside of it is clicked.

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

Edit: I forgot to specify that I am looking for a way to accomplish this using eventHandlers.

Share Improve this question edited Jun 30, 2020 at 8:10 Brian Tompsett - 汤莱恩 5,88372 gold badges61 silver badges133 bronze badges asked Oct 20, 2016 at 2:55 UltimateSky 411 gold badge1 silver badge3 bronze badges

Add a comment |

10 Answers 10

Sorted by: Reset to default 5

Try Element.closest() you can change element selector by 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."

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>

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>

getElementbyClassName is the wrong syntax. You're looking for getElementsByClassName. This returns an array like object (HTMLCollection), not a node, and you will need to apply the event listener to each element individually. You also don't need to use 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>

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

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.

Your javascript code is having issues. 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");
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.

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>

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>

It looks like the button tag does not have onclick function. 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();
   });
  }
 })();

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to remove the div that a button is contained in when the button is clicked? - Stack Overflow

10 Answers 10

与本文相关的文章

评论列表(0)