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

Question

伙计们，我有一个按钮和 texarea，当我单击它时，会出现 'input button' 和 'text i wrote'。之后，当我单击 'input button' 删除父元素（该文本和输入）时，它 works.Everything 现在正常了。但是，当我再次单击按钮以再次显示 'input button' 和 'text i wrote' 时，它不起作用。 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

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

的子元素

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

Answer 2

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

所以你想要多组按钮和文本，可以通过它们各自的按钮删除，然后将它们包装在一个元素中，以便可以轻松地对它们进行分组和删除。

$(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>

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

After removing parent elements cant get again them

jquery

parent