CODEWITHSUNDEEP
jquery
Jorge Montoya
Jorge Montoya

Reputation: 127

Remove a class on a child element

I'm trying to make a serch box inside a div. When the search box gets the focus, the outer div gets a dimmed "effect". The html looks like this: 

jQuery(".input-group input[type=search]").focus(function(event){
   jQuery("#navbar").addClass("dimmed");
});

jQuery(".input-group input[type=search]").blur(function(event){
   jQuery("#navbar").removeClass("dimmed");
});
.dimmed {
  filter: blur(3px);
  opacity: .2;
  transition: all 3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
  <div class="input-group">
    <input type="search">
  </div>
</div>

The code works as expected, however I want the search box not to inherit the class from its parent container. Whats the way to proceed here?

Upvotes: 0

Views: 45

Answers (1)

Matt
Matt

Reputation: 2290

heres an example that clones the input and appends it to the body

jQuery(".input-group input[type=search]").focus(function(event) {
  jQuery("#navbar").addClass("dimmed");
  var clone = $(this).clone();
  $(this).data('clone', clone);
  clone.css('position', 'fixed')
  clone.css('pointer-events', 'none')
  clone.css('top', $(this).offset().top)
  clone.css('left', $(this).offset().left)

  $('body').append(clone);
  $(this).on('input', function() {
    clone.val($(this).val())
  })
});

jQuery(".input-group input[type=search]").blur(function(event) {
  jQuery("#navbar").removeClass("dimmed");
  var clone = $(this).data('clone');
  clone.remove()
});
 .dimmed {
   filter: blur(3px);
   opacity: .2;
   transition: all 3s;
 }

 #navbar {
   display: flex;
   background: #333;
   padding: 10px;
   color: #fff;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
  <div class="input-group">
    <input type="search">
  </div>
  <div class="input-group">
    <input type="search">
  </div>
  <div class="input-group">
    <input type="search">
  </div>
  <h2> hello </h2>
</div>

Upvotes: 1

Related Questions