How to use JavaScript variables in jQuery selectors?
$(`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.
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").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();