入力時に入力テキストをリストに追加し、テキストをクリアします。クリッククローズクラスで、親のリを削除

Question

私は初心者です.JavaScriptとjqueryです。私は、ユーザーが入力フィールドにテキストを入力し、Enterキーを押してフィールドをクリアし、テキストをリストに追加したいと思っています。リスト項目には、リストから削除するためのリンクが必要です。 plunkerへ

HTML

<ul id="list"> 
    <li><input type="text" id="text" placeholder="Enter your text" /></li> 
    <li>text<a href="#" class="close">x</a></li> 
</ul> 

JS

$("input").on("keydown",function search(e) { 
    if(e.keyCode == 13) { 
    var text = $('#text').val(); 
    if(text.length){ 
     $('<li />', {html: text}).appendTo('ul.list'); 
    } 
    event.currentTarget.value = ""; 
    } 
}); 

$('.close').on('click', '.itemDelete', function() { 
    $(this).closest('.li').remove(); 
}); 

リンク：https://plnkr.co/edit/lGemDbBsoklXCGASM8Qd

Answer 1

は、ここでは簡単な例です。そのトリックは、keyupイベントハンドラを使用し、それが押されたエンターキー（13）であることを確認することです。次に、jqueryを使用して、liをulに追加することができます。リスト項目を削除するという要件を満たすために、基本的にクリックしたリスト項目を削除するだけですか？

HTML

<input id="myInput" type="text" /> 
    <ul id="list"> 
     <li>text<a href="#" class="close">x</a></li> 
    </ul> 

はJavaScript

$('#myInput').keyup(function (e) { 
    if (e.which == 13) { 
     $('#list').append($('<li />').append($('<a />', {href: '#', text: $('#myInput').val()}).click(function (e) { 
      $(this).parent().remove(); 
     }))); 
     $('#myInput').val('') 
    } 
}); 

Answer 2

[OK]を、この作業を取得するために管理。私の批評を見逃したいなら、自由に感じてください。

Javascriptを

$('#myInput').keyup(function (e) { 
    if (e.which == 13) { 
     var text = $('#myInput').val(); 
     var close = '<li>' + text + '<a href="#" class="close">x</a></li>'; 

     $('#list').append(close); 
     $('#myInput').val(''); 
     } 
}); 

$("#list").on("click", ".close", function(){ 
    $(this).parent().remove(); 
}); 

Plunkerは：あなたが近いクラスでリンクをクリックしたときhttps://plnkr.co/edit/lGemDbBsoklXCGASM8Qd