How to use JavaScript variables in jQuery selectors?

Question

How do I use JavaScript variables as a parameter in a jQuery selector?

<script type="text/javascript">
$(function(){    
  $("input").click(function(){
    var x = $(this).attr("name");

    $("input[id=x]").hide();    
  });    
});
</script>

<input type="text" id="bx"/><input type="button" name="bx"/>
<input type="text" id="by"/><input type="button" name="by"/>

Basically what I want to do is to be able to hide the element which has an id that is equal to the name of the element that is being clicked.

Vinayak Phal · Accepted Answer · 2015-06-25 05:31:49Z

292

var name = this.name;
$("input[name=" + name + "]").hide();

OR you can do something like this.

var id = this.id;
$('#' + id).hide();

OR you can give some effect also.

$("#" + this.id).slideUp();

If you want to remove the entire element permanently form the page.

$("#" + this.id).remove();

You can also use it in this also.

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});

edited Jun 25, 2015 at 5:31

answered May 5, 2011 at 2:10

Vinayak Phal

8,9194 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

isync Over a year ago

It's important to note that the variable used to concatenate must be non-numerical, so do toString() if id is a number.

user202729 May 31 at 4:46

This is actually incorrect with . and :. See jQuery selector value escaping - Stack Overflow.

Phil · Accepted Answer · 2018-08-21 06:15:22Z

$(`input[id="${this.name}"]`).hide();

As you're using an ID, this would perform better

$(`#${this.name}`).hide();

I highly recommend being more specific with your approach to hiding elements via button clicks. I would opt for using data-attributes instead. For example

<input id="bx" type="text">
<button type="button" data-target="#bx" data-method="hide">Hide some input</button>

Then, in your JavaScript

// using event delegation so no need to wrap it in .ready()
$(document).on('click', 'button[data-target]', function() {
    var $this = $(this),
        target = $($this.data('target')),
        method = $this.data('method') || 'hide';
    target[method]();
});

Now you can completely control which element you're targeting and what happens to it via the HTML. For example, you could use data-target=".some-class" and data-method="fadeOut" to fade-out a collection of elements.

Alexx Roche · Accepted Answer · 2012-09-18 09:59:32Z

15

$("input").click(function(){
        var name = $(this).attr("name");
        $('input[name="' + name + '"]').hide();    
    });

Also works with ID:

var id = $(this).attr("id");
$('input[id="' + id + '"]').hide();

when, (sometimes)

$('input#' + id).hide();

does not work, as it should.

You can even do both:

$('input[name="' + name + '"][id="' + id + '"]').hide();

edited Sep 18, 2012 at 9:59

answered Sep 18, 2012 at 7:41

Alexx Roche

3,2691 gold badge36 silver badges40 bronze badges

Comments

Alex R. · Accepted Answer · 2011-05-05 01:58:46Z

8

var x = $(this).attr("name");
$("#" + x).hide();

answered May 5, 2011 at 1:58

Alex R.

4,7484 gold badges32 silver badges40 bronze badges

Comments

morgar · Accepted Answer · 2011-05-05 02:00:27Z

5

$("#" + $(this).attr("name")).hide();

answered May 5, 2011 at 2:00

morgar

2,41718 silver badges17 bronze badges

Comments

aWebDeveloper · Accepted Answer · 2016-03-27 11:33:11Z

ES6 String Template

Here is a simple way if you don't need IE/EDGE support

$(`input[id=${x}]`).hide();

or

$(`input[id=${$(this).attr("name")}]`).hide();

This is a es6 feature called template string

    (function($) {
        $("input[type=button]").click(function() {
            var x = $(this).attr("name");
            $(`input[id=${x}]`).toggle(); //use hide instead of toggle
        });
    })(jQuery);

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="bx" />
    <input type="button" name="bx" value="1" />
    <input type="text" id="by" />
    <input type="button" name="by" value="2" />

String Concatenation

If you need IE/EDGE support use

$("#" + $(this).attr("name")).hide();

    (function($) {
        $("input[type=button]").click(function() {
            $("#" + $(this).attr("name")).toggle(); //use hide instead of toggle
        });
    })(jQuery);

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="bx" />
    <input type="button" name="bx" value="1" />
    <input type="text" id="by" />
    <input type="button" name="by" value="2" />

Selector in DOM as data attribute

This is my preferred way as it makes you code really DRY

// HTML
<input type="text"   id="bx" />
<input type="button" data-input-sel="#bx" value="1" class="js-hide-onclick"/>

//JS
$($(this).data("input-sel")).hide();

    (function($) {
        $(".js-hide-onclick").click(function() {
            $($(this).data("input-sel")).toggle(); //use hide instead of toggle
        });
    })(jQuery);

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="bx" />
    <input type="button" data-input-sel="#bx" value="1" class="js-hide-onclick" />
    <input type="text" id="by" />
    <input type="button" data-input-sel="#by" value="2" class="js-hide-onclick" />

Collectives™ on Stack Overflow

How to use JavaScript variables in jQuery selectors?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related