按下按钮时隐藏或删除重复元素的单个实例

Question

当单击带有“关闭”类的按钮时，如何删除/隐藏单个“bakant”元素？使用以下 jsfiddle 生成元素：https://jsfiddle.net/L4f7pjau/

<div class="shape" id="plan4_shape">
    <span class="bakkant"><input class="measures" id="plan4_width" placeholder="mm"/><span class="times"> &times;</span> <input class="measures" id="plan4_width" placeholder="mm"/></span>
    <span class="bakkant" id="bakkant"><input class="measures" id="plan4_width" placeholder="mm"/><span class="times"> &times;</span> <input class="measures" id="plan4_width" placeholder="mm"/><button class="close" value="close1">&times;</button></span>
    <button name="add_row" class="addrow" id="addrow4" onClick="addrow()">Add row</button>
</div>

Answer 1

简答（针对注意力不集中的人）：

// Listen for bubbled click events, coming from delete buttons
$('.shape').on('click', '.close', function() {

  // Remove the row closest to the delete button pressed
  $(this).closest('.bakkant').remove();
});

现在是完整的答案：

现有代码存在多个问题，因此我想通过一些建议和工作演示来指导您：

• 能够删除您克隆的项目是第一个问题。如果您删除它，您将无法再添加任何记录。我建议您改为使用未存储在列表中的模板项。我使用一个未知类型的虚拟 script 块来保存模板的 HTML。非常容易维护。

• 同样delete需要对动态添加的item进行操作，所以需要一个委托事件处理器，连接到一个不变的祖先元素。我将它连接到.shape，因为它是所有记录的共同祖先。

• plan4_width 的 ID 也有重复，页面中不能有这些 ID。将它们改为一个类。

jQuery 代码（已注释）：

$(function() {
  // Your count of added IDs
  var i = 0;

  // Add button handler
  $('#addrow4').click(function() {

    // Get the template HTML and convert to an element
    var $clone = $($('#template').html());

    // Set the id of the new entry (assuming it needs an ID)
    $clone.attr('id', "bakkant" + ++i);

    // Add the new row to the start of the container
    $('.shape').prepend($clone);
  });

  // Listen for bubbled click events, coming from delete buttons
  $('.shape').on('click', '.close', function() {

    // Remove the row
    $(this).closest('.bakkant').remove();
  });

});

完整工作解决方案：https://jsfiddle.net/y52ttwfv/4/

注意事项：

• 您还为每行的两个字段指定了width。应该是height 吗？

Answer 2

$(this).parent() 将识别父跨度。

如果您要进一步嵌套按钮元素，请尝试$(this).closest('.bakknat')

然后根据情况使用.remove() 或.hide()。如果您要提交表单并动态解析输入，您可能需要使用 remove。

$(this).parent().remove();

这是另一个主题 .parent().remove() issue

Answer 3

我建议您将两者（bakkant 和 a 按钮）包装在同一个 div、span 或您喜欢的任何内容中。

然后你可以找到a按钮的父级并隐藏它，这样隐藏带有按钮的div和bakkand。

您可以使用 .parent() 查找 div (jQuery API - parent())

和 .hide() 隐藏 div。