एक div - जावास्क्रिप्ट, jquery, html से पाठ को हटाना

मैंने दो बटन बनाए। एक इनपुट से एक जानकारी जोड़ता है और दूसरा इनपुट की जानकारी को हटा देता है अगर यह सूची में मौजूद है

<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").click(function(){
var toAdd = $("input[name=add]").val();
$("#box").append("<p>" +toAdd+ "</p>");
});

$("#remove").click(function(){
var checkRemove = $("input[name=remove]").val();
(......)
};

उत्तर:

उपयोग 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>

आप चयनित शब्द को हटाने के लिए प्रतिस्थापित फ़ंक्शन का उपयोग कर सकते हैं

$("#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);
});