Jquery is rescuing the options text along with the label text

Question

While working on something I stumbled on the following situation. Follow the code with the "problem":

var oi = $("label").text();
$("div").html(oi);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Hello
  <select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </select>
</label>

<div></div>

I wanted to pull only the label text but the texts inside the options are coming together. You can work around this with pure Jquery or Javascript?

PS. I know it is possible to 'link' a label with an element using 'for' but wanted to avoid this way, I am working on an extensive form and create unique id’s just for the Abels is quite exhausting.

Answer 1

var oi = $("label").clone().children().remove().end().text();
$("div").html(oi);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Hello
  <select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </select>
</label>

<div></div>