从div中删除文本

时间:2017-01-11 17:25:37

标签: javascript 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>

我管理编写Jquery for add,但不是remove:

$('#add').click(function(){
var toAdd = $('input[name=add]').val();
$('#box').append("<p>" +toAdd+ "</p>");
});

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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);
});