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.
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(); }); 
$(`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.
$("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(); 
var x = $(this).attr("name"); $("#" + x).hide(); $("#" + $(this).attr("name")).hide();
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" /> 