Jquery 按钮的定位不起作用

我创建了一个按钮，所以当我点击它时，随机出现一张卡片。 随机卡上有一个“x”。我无法将“x”定位在右上角，我不知道为什么它不起作用

我想创建一个函数，这样当我点击“x”时，随机卡就会被删除

这是我的HTML：

<button class="plus">
  <div class="item">
    <p> + </p>
  </div>
</button>

<div id="newCardHolder">

</div>

    <div id="cardPrototype" class="card" style="display:none;">
        <p  class="delete">x</p>
      <span> Title </span>
      <form name="theform" style="display:none;">
        <input class="input-feld" type="text">
        <br>
        <input class="input-feld " type="text">
        <br>
        <input class="speichern"type="button" onClick="new Person()" value="Speichern">
        <input class="abbrechen"type="button" onClick="new Person()" value="Abbrechen">
      </form>
    </div>

还有我的jQuery：

$(document).ready(function () {
    $("button.plus").on("click", function () {
        var newCard = $('#cardPrototype').clone(true); 
        $(newCard).css('display', 'block').removeAttr('id');
        $('#newCardHolder').append(newCard);
    });

    $('body').on('click', '.card', function () { 
        $(this).find('form').show();
        $(this).find('span').remove();
    });
});

---

你没有

位置

，这是因为它不起作用。更改为：

.card { 
       position: relative;
}
.delete {
       position: absolute;
       font-family:'TheSans Swisscom';
       right:0;
       top:0;
}

---

.card

需要是

相对的

才能允许

。使用
绝对定位，删除卡上附加的定位。
只需在CSS中添加一些小东西即可


$（文档）.ready（函数（）{
$（“button.plus”）。在（“单击”，函数（）{
var newCard=$（'#cardPrototype'）.clone（true）；
$（newCard）.css（'display'，'block'）.removeAttr（'id'）；
$（“#新持卡人”）。追加（新卡）；
});
$（'body'）。在（'click'，'card'，函数（）上{
$（this.find（'form'）.show（）；
$（this.find（'span'）.remove（）；
});
});
。输入字段{
字体系列：Thessans Swisscom；
保证金：3倍；
}
.卡片{
位置：相对位置；
宽度：300px；
右边距：5px；
左边距：5px；
边缘底部：10px；
浮动：左；
填充：10px；
背景色：#BBBBBB；
边框：1px实心#ccc；
边界半径：10px；
}
.删除{
字体系列：“Thessans Swisscom”；
右：5px；
排名：0；
位置：绝对位置；
显示：块；
保证金：0；
线高：1；
}
斯派亨先生{
字体系列：“Thessans Swisscom”；
}
abbrechen先生{
字体系列：“Thessans Swisscom”；
背景颜色：绿黄色；
}

+

x
标题




您需要将
位置：绝对
添加到
类中。删除
类。要在正确的项目上执行此操作，您需要将
position:relative
添加到卡中。这使得删除的位置相对于卡片。
要使用该CSS定位您的小
x
，您需要将其设置为相对于其父级，如果您以前没有这样做过，这有点违反直觉

.card {
  position: relative;
}

.card .delete {
  position: absolute;
}

要使其充当关闭按钮，只需复制现有的jQuery，但要执行相反的操作：

$('body').on('click', '.card .delete', function () { 
    $(this).closest('.card').remove();
});

无论如何，这是一种方法

$('body').on('click', '.card .delete', function () { 
    $(this).closest('.card').remove();
});