如何檢查/刪除元素？

Question

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

欲通過按下退格鍵（當輸入爲聚焦）或通過點擊該標籤刪除的標籤。現在我正在談論第一個選項。此外，我需要先將其設置爲紅色背景色（如「你確定嗎？」概念）。好吧，就像你看到的那樣，我的小提琴把它設置成了一個紅色的背景色，但它並沒有將它移除。怎麼了？

Answer 1

你必須更好地切換類和檢查它，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>

Answer 2

我建立在你的計數器中，檢查你的按鍵狀態。如果您按一次計數器爲1，並且如果第二次按下，它將刪除該元素，並再次爲0。我希望那就是你想要的。檢查：

$(function() { 

    counter = 0; 

    $("#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 = ""; 
     $("#tags span").css('background-color', '#E1ECF4'); 
     counter = 0; 
    }, 
    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 == '') { 
     counter = counter + 1; 
     if (counter == 1) { 
      $(this).prev("span").css('background-color', 'Red'); 
     } else { 
      $(this).prev("span").remove(); 
      counter = 0; 
     } 
     } 
    } 
    }); 
    $('#tags').on('click', 'span', function() { 
    $(this).remove(); 
     $("#tags span").css('background-color', '#E1ECF4'); 
     counter = 0; 
    }); 

}); 

https://jsfiddle.net/4swtduae/7/