How to activate my delete button with JS

Question

I'm trying to activate my delete button in html with the help of JS. My button code looks like this

var panel = document.getElementByClassName("btn");
    panel.addEventListener("click",hide);
    function hide(){
     var panelHide = document.getElementByClassName("mypanel"); 
     panelHide.className = "hide";
    }

<div class="mypanel">
 <div class="header">My header</div>
 <div class="body">
  <p>body</p>
  <div class="showOnHover">
    <a href="" class="btn btn-xs btn-danger">delete</a>
    </div>
  </div>  
 </div>

and when I run the js it doesn't work, and I've already write something like .hide{display:none} in my CSS file. I would be so thankful if someone could answer this question, thanks

where are you adding js code? in the head or at the end of the body? — ChaosPattern, May 05 '17 at 08:23
It's [`.getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) (plural not singular). — Andreas, May 05 '17 at 08:25
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Andreas, May 05 '17 at 08:29
I'm adding it in an independent js file and has a at the bottom of html — Daniel Lau, May 05 '17 at 08:45
and I've already changed the syntax error, thank you btw, but the problem is still unsolved — Daniel Lau, May 05 '17 at 08:46
Have you tried to use any of the current answers? Any of those should be able to solve your problem. — kevin b., May 05 '17 at 08:49

score 0 · Answer 1 · answered May 05 '17 at 08:36

0

var panel = document.getElementsByClassName("btn")[0];
panel.addEventListener("click",hide);
function hide(){
    var panelHide = document.getElementsByClassName("mypanel")[0]; 
    panelHide.className = "hide";
}

answered May 05 '17 at 08:36

Mithlesh Singh

26
3

use document.getElementsByClassName – Mithlesh Singh May 05 '17 at 08:41

score 0 · Answer 2 · edited May 23 '17 at 12:18

Let me firstly point out that the syntax is

document.getElementsByClassName("btn");

instead of document.getElementByClassName("btn");

the getElementsByClassName method returns an Array-like object of the elements matching the criteria/having the classname that you specified.

So in order to add an event listener to all those elements, is by looping over the Array-like object that is returned from the method, and adding an eventlistener one by one. Like this:

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

Applied to your situation, this would give the following code (see snippet).

   
var panel = document.getElementsByClassName("btn");

function hide(){
     var panelHide = document.getElementsByClassName("mypanel"); 
     panelHide.className = "hide";
    }

for (var i = 0; i < panel.length; i++) {
    panel[i].addEventListener('click', hide, false);
}

<div class="mypanel">
 <div class="header">My header</div>
 <div class="body">
  <p>body</p>
  <div class="showOnHover">
    <a href="" class="btn btn-xs btn-danger">delete</a>
    </div>
  </div>  
 </div>

Credits go to this post. Hope it helps.

ChaosPattern · Answer 3 · 2017-05-05T08:58:52.150

<div class="mypanel">
  <div class="header">
    My header
  </div>
  <div class="body">
    <p>body</p>
    <div class="showOnHover">
      <a href="#" class="btn btn-xs btn-danger">delete</a>
    </div>
  </div>
</div>
    <script>
      var panel = document.getElementsByClassName("btn");
      Array.prototype.forEach.call(panel, element => element.addEventListener('click', hide));

      function hide (event) {
        event.preventDefault();
        var panelHide = document.getElementsByClassName("mypanel");
        Array.prototype.forEach.call(panelHide, element => element.className = 'hide');
      }
    </script>

this is an example waht I done, first of all getElementsByClassName methods returns an array, so I add hide event to all of them, after you need to preventDefault function in order to avoid the redirection.

Once the delete link is clicked then hide class will be added to all elements that had mypanel class

monas · Answer 4 · 2017-05-05T08:56:00.343

Check this out. There is much nicer way of doing this.

var panel = document.querySelector(".btn");    
panel.addEventListener("click",hide);

function hide(e){
    e.preventDefault();

    // now this hides only that div which contains delete link
    // but You can put any class name not showOnHover
    var panelHide = document.querySelector(".showOnHover"); 
    panelHide.classList.add("hide");
}

.hide {
  display: none;
}

<div class="mypanel">
  <div class="header">My header</div>
  <div class="body">
      <p>body</p>
      <div class="showOnHover">
          <a href="" class="btn btn-xs btn-danger">delete</a>
      </div>
  </div>      
</div>

Codepen

How to activate my delete button with JS

4 Answers4