Using jQuery to Get Rid of Text in a html label element

Question

How can you use jQuery to get rid of text between the <label> tags?

I would need to keep the <input> within the <label> but get rid of the "Clinical Vendor" text.

<label for="form">
    <input type="checkbox" class="ar" name="b" value="Clinical Vendor" id="form">Clinical Vendor
</label>

I have tried jQuery('label').text(''); but that seems to get rid of the input tag as well.

EDIT: Everyone came up with pretty much the same solution using nodes. TIL! Thanks, everybody!

The simplest way to do this is to wrap the text in another element, such as a `span`, then call `text('')` on that. If you want to keep your HTML as-is, you'll need to go filtering through the text nodes. — Rory McCrossan, Oct 23 '18 at 16:16
Possible duplicate of [jquery remove label text](https://stackoverflow.com/questions/46878456/jquery-remove-label-text) — Maarti, Oct 23 '18 at 16:18
@putvande I am hacking together an interface using a Wordpress plugin. I don't have control of the HTML.... — qotsa42, Oct 23 '18 at 17:12

Quentin Veron · Accepted Answer · 2018-10-23T16:28:25.460

2

An input tag can't have any child nodes since it is an empty element.
You need to target the text associated with the label and remove it.

About nodeType (MDN)

$('label')
  .contents()
  .filter(function() {
    return this.nodeType == 3;
  }).remove();

Code from this question

edited Oct 23 '18 at 16:28

answered Oct 23 '18 at 16:22

Quentin Veron

3,079
1
14
32

score 1 · Answer 2 · answered Oct 23 '18 at 16:21

1

I believe this might work for you:

$("label").contents().filter(function(){ return this.nodeType != 1; }).remove();

Demo fiddle

answered Oct 23 '18 at 16:21

Pedro Estrada

224
1
6

Honkalonkalooooohhh · Answer 3 · 2018-10-23T16:28:35.197

0

jQuery('label').contents().last()[0].textContent='';

edited Oct 23 '18 at 16:28

answered Oct 23 '18 at 16:16

Honkalonkalooooohhh

141
7

Ah right didn't see the text after the input. Nvm then. – Honkalonkalooooohhh Oct 23 '18 at 16:20
Adjusted the answer accordingly. Thx for pointing out the problem. – Honkalonkalooooohhh Oct 23 '18 at 16:31

score 0 · Answer 4 · answered Oct 23 '18 at 16:24

You could replace the text node with a blank one:

            function isTextNode() {
              return (this.nodeType === 3);
            }
            $("label").contents().filter(isTextNode).replaceWith(
              document.createTextNode("")
            );

Using jQuery to Get Rid of Text in a html label element

4 Answers4