按钮的定位不起作用

Question

我创建了一个按钮,所以当我点击它时会出现一张随机卡片.在随机卡上是"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>

我的CSS:

.input-feld {
    font-family: TheSans Swisscom;
    margin:3px;
}

.card {
            width:300px;
            margin-right:5px; 
            margin-left:5px; 
            margin-bottom:10px; 
            float: left;
            padding:10px; 
            background-color: #BBBBBB; 
            border: 1px solid #ccc; 
            border-radius:10px;
}

.delete {
            font-family:'TheSans Swisscom';
            right:0;
            top:0;
}

.speichern{
    font-family:'TheSans Swisscom';
}

.abbrechen{
    font-family:"TheSans Swisscom";
    background-color: greenyellow; 
}

而我的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();
    });
});

Answer 1

x要用CSS 定位你的小东西,你需要将它设置为相对于它的父亲,如果你之前没有这样做,这有点违反直觉.

.card {
  position: relative;
}

.card .delete {
  position: absolute;
}

要让它作为一个关闭按钮,你只需要复制你拥有的jQuery,但做相反的事情:

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

无论如何,这是做到这一点的一种方式.