Assign function dynamically

Navigation
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 that in my code, I have several elements with class .box and I wanted to assign the element .close , a function that removes from the page the .box that owns it, without having to assign inline in html, or individually in javascript. How to do?

    
asked by anonymous 28.01.2016 / 12:50

4 answers

3

See if it 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>
    
28.01.2016 / 13:03
2

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

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

And check 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 remove the parent element from the clicked item, in this case .box : 

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

Complete 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: "
<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>
d7";
}
.box .close {
  background: #ccc;
}
document.querySelector(".container_boxs").addEventListener('click', function(e) {
  //...
});

Full example jsFiddle.

  

Solution-based credits: link

    
28.01.2016 / 13:11
2

First select the elements whose class is close then click the click event on it, when the user clicks it will remove the parentNode "above", remember, the relationship of elements works like 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>
    
28.01.2016 / 13:10
-2

Use jQuery to make interface integrations

I hope it'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

    
28.01.2016 / 12:59
Disable tab that shows all results Relationship between tables