title: Vue.js get element's html value by clicking on it's neighboring element
body: <p>Hello everyone I'm building a simple notes app and I can't figure out how to implement one feature.</p>
  
  <p>I have a card element and delete button as a child of this element. I need to check if the card element child's(.card-title) html value(jQuery's .html()) is equal to the localStorage(I'm using for to loop through the localStorage object) key by clicking on Delete button(that is a child of the card element alongside with the card's title) .Then, if true, I need to delete the localStorage item by key that is equal to the .card-title's html value.</p>
  
  <p>So basically I have</p>
  
  <ul>
  <li>.card
  
  <ul>
  <li>.card-title (with html value I need to get)</li>
  <li>.card-body (nothing to do with it)</li>
  <li>.delete-button (by clicking on it I need to get .card-title's html value)</li>
  </ul></li>
  </ul>
  
  <p>That's only my point of view, which, most likely, is wrong. So, maybe, there is a better approach for deleting notes in my app?</p>
  
  <p>Any ideas?</p>
  
  <p><a href="https://codepen.io/YegorGunko/pen/vdBjvB?editors=1010" rel="nofollow noreferrer">Full code on CodePen</a></p>
  
  <p>Thank you very much for spending your precious time with my issue! Thank you for any help!</p>
  
  <p>So I have a code like this :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="notes"&gt;
    &lt;div class="container"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="title"&gt;Enter title&lt;/label&gt;
        &lt;input class="form-control" id="title"/&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="body"&gt;Enter body&lt;/label&gt;
        &lt;textarea class="form-control" id="body"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;button class="btn btn-primary" @click="add"&gt;Add&lt;/button&gt;
        &lt;button class="btn btn-danger" @click="clear"&gt;Delete all&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="card" v-for="o,t,b,c in notes"&gt;
        &lt;div class="card-body"&gt;
          &lt;h5 class="card-title"&gt;{{t}}&lt;/h5&gt;
          &lt;p class="card-text"&gt;{{o[b]}}&lt;/p&gt;
          &lt;a class="card-link" @click="remove"&gt;Delete&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>new Vue({
      el: "#notes",
      data: {
          notes: {}
      },
      methods: {
          add: function() {
              localStorage.setItem($("#title").val(), $("#body").val());
              location.reload(true);
          },
          clear: function() {
              localStorage.clear();
              location.reload(true);
          },
          remove: function(e) {
              for (i = 0; i &lt; localStorage.length; i++) {
                  if (
                      localStorage.key(i) ==
                      $(this)
                      .closest(".card")
                      .find(".card-title")
                      .html()
                  ) {
                      alert(true);
                  }
              }
          }
      },
      created: function() {
          for (i = 0; i &lt; localStorage.length; i++) {
              this.notes[localStorage.key(i)] = [
                  localStorage.getItem(localStorage.key(i)),
                  "red"
              ];
          }
      }
  });
  </code></pre>