How to remove tags when input is focused

i want to remove tags based on backspace keypress

Input field is need to always focus on it, so i cannot remove input filed from container

Question: i want to remove tag(s) based on each backspace keypress but focus will be always input element

$(function(){
   $('#input').focus();
})
#tagsWrapper{
    width: 400px;
    height: auto;
    border: 1px solid #989898;
    padding: 3px;
}

#tagsWrapper input{
  width:100%;
  border: 0;
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>

</head>


<div id="tagsWrapper">
   <div id="tags">
            <div class="mdc-chip" role="row">
        <div class="mdc-chip__ripple"></div>
        <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith</span>
          </span>
        </span>
        <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
      </div>
      
            <div class="mdc-chip" role="row">
        <div class="mdc-chip__ripple"></div>
        <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith</span>
          </span>
        </span>
        <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
      </div>
      
      
            <div class="mdc-chip" role="row">
        <div class="mdc-chip__ripple"></div>
        <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith</span>
          </span>
        </span>
        <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
      </div>
   </div>
   <input type="text" id="input">
</div>

Please help me thanks in advance!!

Answer

This program hides the last tags when you type backspace:

$(function() {
 $('#input').focus();

  $("#input").on("keydown", function(event) {
   if(event.which == 8){
     $("div[role=row]:visible").last().hide();
   }
  });
})
#tagsWrapper {
  width: 400px;
  height: auto;
  border: 1px solid #989898;
  padding: 3px;
}

#tagsWrapper input {
  width: 100%;
  border: 0;
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>

</head>


<div id="tagsWrapper">
  <div id="tags">
    <div class="mdc-chip" role="row">
      <div class="mdc-chip__ripple"></div>
      <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith1</span>
      </span>
      </span>
      <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
    </div>

    <div class="mdc-chip" role="row">
      <div class="mdc-chip__ripple"></div>
      <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith2</span>
      </span>
      </span>
      <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
    </div>


    <div class="mdc-chip" role="row">
      <div class="mdc-chip__ripple"></div>
      <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith3</span>
      </span>
      </span>
      <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
    </div>
  </div>
  <input type="text" id="input">
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *