ボタンを2つ作成しました。一方は入力から情報を追加し、もう一方は入力の情報がリスト内に存在する場合は削除します。
<div id = inputArea>
<button id= "add">Add</button><input type="text" name="add"></input>
<button id= "remove">Remove</button><input type="text" name="remove"></input>
</div>
<div id= "box"></div>
私はaddのためにJqueryを書くようにしましたが、removeのためには書きませんでした。
$("#add").click(function(){
var toAdd = $("input[name=add]").val();
$("#box").append("<p>" +toAdd+ "</p>");
});
$("#remove").click(function(){
var checkRemove = $("input[name=remove]").val();
(......)
};
回答:
回答№1は1つかいます filter()
カスタム条件を使用して除外する方法。
$("#remove").click(function(){
var checkRemove = $("input[name=remove]").val();
$("#box p").filter(function(){
return $(this).html() == checkRemove;
}).remove();
});
$("#add").click(function() {
var toAdd = $("input[name=add]").val();
$("#box").append("<p>" + toAdd + "</p>");
});
$("#remove").click(function() {
var checkRemove = $("input[name=remove]").val();
$("#box p").filter(function() {
return $(this).html() == checkRemove;
}).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=inputArea>
<button id="add">Add</button>
<input type="text" name="add">
<button id="remove">Remove</button>
<input type="text" name="remove">
</div>
<div id="box"></div>
回答№2の場合は0
あなたは選択した単語を削除するために置換機能を使用することができます
$("#add").click(function(){
var toAdd = $("input[name=add]").val();
$("#box").append("<p>" +toAdd+ "</p>");
});
$("#remove").click(function(){
var checkRemove = $("input[name=remove]").val();
var html =$("#box").html();
var res = html.replace("<p>" +checkRemove+ "</p>","");
$("#box").html(res);
});