删除子元素上的类

Question

我试图在div中制作一个serch盒子。当搜索框获得焦点时，外部div会变得暗淡＆＃34;效果＆＃34;。 html看起来像这样：

＆＃13;

＆＃13;

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");
});

＆＃13;

.dimmed {
  filter: blur(3px);
  opacity: .2;
  transition: all 3s;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

代码按预期工作，但我希望搜索框不要从其父容器继承该类。什么方式在这里继续？

Answer 1

下面是一个克隆输入并将其附加到正文的示例

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>