html - 如何制作删除按钮?

标签 html css

所以我做了一个按钮,当我单击它时会生成随机卡片。当我单击卡片时,它将显示两个文本字段和两个按钮。

现在,我想在随机卡上创建一个按钮(在我的代码中,该按钮应为“ x”)以删除随机卡。不幸的是,这不起作用。你们能帮我吗?

这是我的代码:



$(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();

  });
});

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

.input-feld {
  font-family: TheSans Swisscom;
  margin: 3px;
  width: 260px;
}
.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;
  position: relative;
}
.delete {
  font-family: 'TheSans Swisscom';
  right: 12px;
  top: 0;
  position: absolute;
}
.speichern {
  font-family: 'TheSans Swisscom';
  background-color: greenyellow;
}
.abbrechen {
  font-family: "TheSans Swisscom";
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

最佳答案

您的删除选择器错误,请尝试.card .delete



$(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();

  });

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

.input-feld {
  font-family: TheSans Swisscom;
  margin: 3px;
  width: 260px;
}
.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;
  position: relative;
}
.delete {
  font-family: 'TheSans Swisscom';
  right: 12px;
  top: 0;
  position: absolute;
}
.speichern {
  font-family: 'TheSans Swisscom';
  background-color: greenyellow;
}
.abbrechen {
  font-family: "TheSans Swisscom";
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

关于html - 如何制作删除按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39225610/

相关文章:

jquery - 检测元素高度时的错误行为

php - 从MySQL数据库检索图像的高度和宽度

html - 页面不会居中对齐

css - 让一个 div 到达另一个 div 的顶部

jquery - 如何使用jQuery为包装器增加高度?

html - 调整窗口大小时使文本静止不动

javascript - 向下滚动页面时修复一个 div,然后取消修复

jquery - 使用CSS的样式选择选项

javascript - 如何从通过ajax加载的PHP页面调用jquery方法

html - 如何将下拉菜单置于 slider 前面