How to hide label based on child value using jquery

Question

I want to hide an element and a label based on value: My html code looks like this

<form id="wrapper">
    <label>
        <input type="checkbox" value="Slider">
        Slider
    </label>
</form>

So using jquery i can find an input value that contains value="Slider" but the label still remains, because it it doesn't contain any id or class and I can't add anything there, so how can I hide it

$('#wrapper').find("input[value='Slider']").each(function(){
    $(this).hide()
});

Here is a JSFIDDLE.

Please mark one of answer to finishing this discussion. – Mohammad Jul 08 '16 at 16:30 — Mohammad, Jul 08 '16 at 16:30

score 5 · Answer 1 · answered Jul 04 '16 at 11:20

5

You need to hide the parent label element to hide input element and its sibling text:

$('#wrapper').find("input[value='Slider']").closest('label').hide();

answered Jul 04 '16 at 11:20

Milind Anantwar

81,290
25
94
125

@Egzona You forgot to attach jQuery. – Mohammad Usman Jul 04 '16 at 11:30

score 2 · Answer 2 · answered Jul 04 '16 at 11:27

2

Use .has() method to checking children of element.

$("label").has("input[value='Slider']").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
    <input type="checkbox" value="Slider">
    Slider
</label>
<label>
    <input type="checkbox" value="Slider2">
    Slider2
</label>

answered Jul 04 '16 at 11:27

Mohammad

21,175
15
55
84

can I do the same this using javascript without jquery cause I'm having scripts conflicts something like:document.getElementById(' ').style.display = 'none'; – Babel Jul 06 '16 at 07:53

score 1 · Answer 3 · answered Jul 04 '16 at 11:23

1

You can try this:

    $('#wrapper').find("input[value='Slider']").each(function(){
          // $(this).hide();  If you want to hide input too
           $(this).parent().hide();

});

answered Jul 04 '16 at 11:23

Poonam

549
4
15

I think no need to give each loop here @poonam . – Samir Jul 04 '16 at 11:30

How to hide label based on child value using jquery

3 Answers3

Linked