jQuery 将文本添加到标记并删除不起作用

Question

在 jQuery 中，我从一种表单添加一些文本，并且输入的文本将附加到某些元素。到目前为止，它运行良好。但我已经为每个添加的元素放置了一个删除链接。因此，当有人单击删除按钮时，它将从标记中删除所选元素。

Fiddle Link

我的标记是这样的

<div id="wrap">
      <div id="sortMe">
  <div id="item_4">Test 4</div><div id="item_2">Test 2</div><div id="item_0">Test 0</div><div id="item_3">Test 3</div><div id="item_1">Test 1</div>     </div>
      <table cellspacing="0" class="table">
        <tr>
          <td>
            Attribute: 
            <input type="text" id="attribute_group" class="acomplete ac_input" autocomplete="off">
            <input type="hidden" id="id_attribute_group" name="id_attribute_group">
          </td>
          <td>
            <input type="submit" class="button" value="Add" name="addattribute">
          </td>
        </tr>
      </table>
  </div>

jQuery 是这样的

   <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.button').on('click', function() {
      var enteredText = jQuery('#attribute_group').val();
      var lastChild = jQuery('#sortMe').find('div:last-child');
      jQuery(lastChild).append().after('<div class="_'+enteredText+'">Feature:'+enteredText+' <a id="_'+enteredText+'" href="#">Remove This</a></div>');
      jQuery('a').on('click', function(){
        console.log(this);
        jQuery(this).remove().parents();
      });
    });
  });
  </script>

这里正在添加新的div。但当点击删除时，它并没有删除选定的 div。它只是删除文本。因此，任何帮助和建议都将非常感激。谢谢

Answer 1

您可以使用closest()

改变

jQuery(this).remove().parents();

至

jQuery(this).closest('div').remove();

或

jQuery(this).parent().remove();

你的代码不起作用的原因是因为它在删除元素之前没有选择父元素，所以如果你切换父元素并删除你将得到你正在寻找的结果，或者你可以使用closest()。另请注意，.parents() 获取所选元素的所有父级，因此如果您不想使用closest()，请使用parent() 而不是parents()

DEMO