Question

伙计们我有一个按钮和texarea，当我点击它时，会出现一个“输入按钮”和“我写的文字”。之后，当我点击“输入按钮”删除父元素（该文本和输入）时，它可以工作。现在一切正常。但是，当我再次单击按钮以获得“输入按钮”和“我写的文字”再次出现时，它无法正常工作。 Jsfiddle

$(function(){

$('#add').click(function(){
  var myWritting = $('#textarea').val();
    $('#textarea').val('');
  $('#content').html( myWritting +'<input type="submit" value="delete" id="hide"/>')
});

  $('body').on('click', '#hide', function() {
    $(this).parent().remove();
    return false;
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add</button>
<textarea  id="textarea"></textarea>
<div id="content"></div>

Answer 1

您正在删除包含文本和输入的元素，而不仅仅是文本和输入本身父元素需要由文本和输入填充。

因此，您希望有多组按钮和文本可以通过各自的按钮删除，然后将它们包装在一个元素中，以便可以轻松地对它们进行分组和删除。

$(function(){

$('#add').click(function(){
  var myWritting = $('#textarea').val();
    $('#textarea').val('');
  $('#content').append( '<p>' + myWritting +'<input type="submit" value="delete" class="hide"/></p>')
});

  $('body').on('click', '.hide', function() {
    $(this).parent().remove();
    return false;
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add</button>
<textarea  id="textarea"></textarea>
<div id="content"></div>

Answer 2

您正在移除content div。相反，您需要删除content div。

的子元素

$('body').on('click', '#hide', function() {
    $(this).parent().children().remove();
    return false;
});

删除父元素后，无法再次获取它们

2 个答案: