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

Question

如何在单击带有 class 'close' 的按钮时 remove/hide 单个 '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

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

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

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

和 .hide() 隐藏 div.

Answer 2

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

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

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

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

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

Answer 3

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

// 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。非常容易维护。

此外，删除需要对动态添加的项目进行操作，因此需要是一个委托事件处理程序，连接到 non-changing 祖先元素。我将它连接到 .shape，因为它是所有记录的共同祖先。

您还有 plan4_width 的重复 ID，您不能在页面中使用这些 ID。将它们设为 class。

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?

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

Hide or delete single instance of repeated element when button is pressed

html

jquery

show-hide

现在进入完整答案：

jQuery代码（注释）：

备注：