如何检查/删除元素? [英] How to check/remove an element?

问题描述

$(function(){

  $("#tags input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13|32)/.test(ev.which)){
        $(this).focusout();
      } else if (/(8)/.test(ev.which) && this.value == '' && $(this).prev("span").css('background-color')=="rgb(225, 0, 0)") {
        $(this).prev("span").remove();
      } else if (/(8)/.test(ev.which) && this.value == '') {
        $(this).prev("span").css('background-color', 'Red');
      }
    }
  });
  $('#tags').on('click', 'span', function() {
     $(this).remove(); 
  });

});

#tags{
  float:right;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:right;
  color:#3e6d8e;
  background:#E1ECF4;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  direction: rtl;
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}
.autocomplete{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <span>php</span>
  <span>html</span>
  <input type="text" value="" placeholder="Add a tag" />
  <div class="autocomplete"></div>
</div>

我想通过按退格按钮(当输入被聚焦时)或单击该标签来删除标签.现在我在谈论第一种选择.另外，我需要先将其设置为红色背景色((因为您确定吗?"概念)).就像您看到的一样，我的小提琴将其设置为红色背景色，但并未将其删除.怎么了?

I want to remove a tag either by pressing backspace button (when the input is focused) or by clicking on that tag. Now I'm talking about the first option. Also I need to set it a red background color first (as "are you sure?" concept). Ok as you see, my fiddle sets it a red background color, but it doesn't remove it. what's wrong?

推荐答案

您最好切换一个类并进行检查，例如:

You'd have better to toggle a class and check for it, e.g:

$(function() {

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
    },
    keyup: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (/(8)/.test(ev.which) && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (/(8)/.test(ev.which) && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keyup
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

#tags {
  float: right;
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-right: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-left: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  background: #eee;
  border: 0;
  margin: 4px;
  padding: 7px;
  width: auto;
}
.autocomplete {
  display: none;
}
#tags > span.toRemove {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tags">
  <span>php</span>
  <span>html</span>
  <input type="text" value="" placeholder="Add a tag" />
  <div class="autocomplete"></div>
</div>

这篇关于如何检查/删除元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！