How to change value of parent element to an element

Question

I am trying to change the css property of the "node"-class by clicking on the div inside of it which got the class "expand".

When I click on the "expand" div inside the "note", I want to go to parent "note" for changing it size:

var text = document.getElementById("text");
var add = document.getElementById("add");
var notespace = document.getElementById("notespace");


var expand = document.getElementsByClassName("expand");
var notes = document.getElementsByClassName("note");


add.addEventListener("click", function () {
    var textValue = text.value;
    var p = document.createElement("p");
    p.innerHTML = "<div class='note'>" + textValue + 
                  "<br/><br/><div class='expand'> Expand </div></div>";
    notespace.appendChild(p);
    text.value = "";

    for (var i = 0; i < expand.length; i++) {
        expand[i].addEventListener("click", function () {
            notes[i].style.size = "3000px";
        })
    }
})

Answer 1

You can use the parentNode attribute :

for( var i = 0; i < expand.length; i++){
  expand[i].addEventListener("click", function(){
    this.parentNode.style.size = "3000px";
  })    
} 

Or the closest() method :

for( var i = 0; i < expand.length; i++){
  expand[i].addEventListener("click", function(){
    this.closest(".note").style.size = "3000px";
  })    
} 

Note that closest() is not supported on IE.