Dynamically assign function

Asked

Viewed 728 times

3

Example:

<body>
    <div class="box">
        <div class="close"></div>
    </div>

    <div class="box">
        <div class="close"></div>
    </div>

    <div class="box">
        <div class="close"></div>
    </div>
</body>

Let’s say in my code, I have several elements with the class .box and I wanted to attribute to the element .close, a function that removes the existing . box from the page, without having to inline html, or each one individually in javascript. How to do?

javascript html
  • 1

    @Erik that is, you want that when you click on the close, close the box that this close?

  • Yes. I’d like to remove it.

  • Are you using jQuery or not ?

  • No. I would like the solution in pure Javascript.

  • 1

    I’m setting an example

4 answers

3


See if this meets your need;

var closestByClass = function(el, clazz) {
  while (el.className != clazz) {
    el = el.parentNode;
    if (!el) {
      return null;
    }
  }
  return el;
}

document.onclick = function(e) {
  var el = closestByClass(e.target, 'box')
  el.style.display = 'none';
};
<body>
  <div class="box">
    Teste
    <div class="close">x</div>
  </div>

  <div class="box">
    Teste
    <div class="close">x</div>
  </div>

  <div class="box">
    Teste
    <div class="close">x</div>
  </div>
</body>

  • 1

    That’s it! Thanks, Zoom! PS.: Watch out for flash.

  • 1

    I was blinded by the flash.

2

First select the elements whose class is close then trigger the click event on it, when the user clicks will remove the parentNode "above", remember, the elements relation function as a tree.

var close = document.querySelectorAll('.close');

for (var i = 0; i < close.length; i++) {
  close[i].addEventListener('click', function(event) {
    this.parentNode.remove();
  });
}
.box {
  width: 50px;
  height: 50px;
  background-color: grey;
  margin: 5px;
  color: white;
  text-align: center;
}
<div class="box">
  <div class="close">Close</div>
</div>

<div class="box">
  <div class="close">Close</div>
</div>

<div class="box">
  <div class="close">Close</div>
</div>

2

You can add an event to capture all events from click in the body, or restrict to a container where all the .box:

document.querySelector(".container_boxs").addEventListener('click', function(e) {
  //...
});

And check in this event if the clicked element is in the expected DOM hierarchy:

if (e.target.className.toLowerCase() == 'close' && e.target.parentElement.className.toLowerCase() == 'box') {
  alert('Você clicou no elemento close');
}

And finally removes the element Parent of the clicked item, in case the .box:

// remove o parent do item clicado.
e.target.parentElement.remove();

Full example:

document.querySelector(".container_boxs").addEventListener('click', function(e) {
  if (e.target.className.toLowerCase() == 'close' && e.target.parentElement.className.toLowerCase() == 'box') {
    // remove o parent do item clicado.
    e.target.parentElement.remove();
  }
});
.box {
  width: 100%;
  height: 100px;
  border: 1px solid black;
}
.box .close:after {
  content: "\00d7";
}
.box .close {
  background: #ccc;
}
<div class="container_boxs">
  <div class="box">
    <div class="close"></div>
  </div>

  <div class="box">
    <div class="close"></div>
  </div>

  <div class="box">
    <div class="close"></div>
  </div>
</div>

Complete jsFiddle example.

Credits on the basis of the solution: https://stackoverflow.com/a/9649651/2290538

  • 1

    Good solution too, Fernando, Thank you!

-2

Use jQuery to make integrations in the interface

I hope that’s what you’re looking for.

below the code:

<body>
<div class="box1">
    <h2>
      Div1
    </h2>
    <button onclick="deletaDiv(1)">Apagar1</button>
</div>

<div class="box2">
    <h2>
      Div2
    </h2>
    <button onclick="deletaDiv(2)">Apagar2</button>
</div>

<div class="box3">
    <h2>
      Div3
    </h2>
    <button onclick="deletaDiv(3)">Apagar3</button>
</div>
</body>
<script>
    function deletaDiv(id){
        $(".box"+id).hide();
    }
</script>

DEMO

  • Like I said, I don’t want to use JS inline in html. also don’t want to use jQuery. I would like the solution in pure js.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.