Question

我有模式，模式中有一个文本字段和一个添加体验按钮。

现在，当我在文本字段中输入“ travel”并单击“添加体验”按钮时，它将在div上添加徽章/筹码。

这是我的JavaScript代码：

//remove chip when the x mark is click
  $(".remove-chip").on("click", e => {
    console.log("naclick");
    e.preventDefault();
    $(e.currentTarget.parentElement.parentElement).remove();
  });
  //add chip when the add experience button is click
  $(".add-experience-button").on("click", e => {
    e.preventDefault();
    let experience = $("#experience-description").val();
    $(".experience-list-container").append(`
      <div class='chip'>
        <span class="uk-badge chip-badge">${experience}<span class="remove-chip">&nbsp;&nbsp;X&nbsp;</span></span>
      </div>
    `);
    $("#experience-description").text('');
  });

为什么$（“。remove-chip”）。on（“ click”）事件不起作用？

Answer 1

尝试一下：

$("body").on("click", ".remove-chip", e => {
    console.log("naclick");
    e.preventDefault();
    $(e.currentTarget.parentElement.parentElement).remove();
  });

Here是有效的演示。

您也可以尝试以下方法：

$(".experience-list-container").on("click", ".remove-chip", e => {
    console.log("naclick");
    e.preventDefault();
    $(e.currentTarget.parentElement.parentElement).remove();
  });

Demo（具有父类参考）。

点击x标记后如何删除徽章？

1 个答案: