使用onclick事件删除JQuery<li>

Juan Alberto • 4 年前 • 834 次点击

function addElement(e) {
    let text = $('#itemToAdd').val();
    let newItem = $('<li>' + text + '</li>');
    let removeBtn = $('<button onclick = "removeElement">X</button>');

    newItem.append(removeBtn);
    $('#shoppingList').append(newItem);
    $('#itemToAdd').val('');
    e.preventDefault();
}

$(document).ready(function() {
    $("#addBtn").on('click', addElement);
});

对于删除元素,我有:

function removeElement() {
    $(this).parent().remove();
}

添加功能非常有用,但是删除功能却不行。

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/56981

834 次点击

文章 [ 2 ] | 最新文章 4 年前

• 1 楼

palaÑÐ½ 4 年前

从这以后 button

$('#shoppingList').on( "click", "button", function( event ) {
    $(this).closest('li').remove();
});

工作演示:

let count = 1;
function addElement(e) {
  e.preventDefault();
  //let text = $('#itemToAdd').val();
  let newItem = $(`<li>This is a text ${count++}  </li>`);
  let removeBtn = $('<button>X</button>');

  newItem.append(removeBtn);
  $('#shoppingList').append(newItem);
  //$('#itemToAdd').val('');    
}

$(document).ready(function() {
  $("#addBtn").on('click', addElement);

  $('#shoppingList').on("click", "button", function(event) {
    $(this).closest('li').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addBtn">Add</button>
<ul id="shoppingList"></ul>

• 2 楼

Pranav C Balan 4 年前

如果你正在使用 onclick 然后必须使用引用调用函数,因为 this window 对象)并基于此移除该元素。

元素创建:

let removeBtn = $('<button onclick = "removeElement(this)">X</button>');

function removeElement(ele) {
    $(ele).parent().remove();
}

或者也可以使用现有函数,但在创建元素后使用jQuery绑定事件处理程序。

let removeBtn = $('<button>X</button>');
removeElement.click(removeElement);

event delegation 这有助于处理动态创建的元素上的事件。

登录后回复