Question

$(function() {

    $(".track").draggable({
      containment:"document",
      appendTo:document.body,
      connectToSortable:"#playlist tbody",
      revert: true,
      revertDuration: 0,
      cursor: "move", 
      helper: "clone",
      cursorAt: { top: 17, left: 80 },
      start: function(event, ui) {
      },
      drag: function(event, ui) {

      }
    });

    $("#playlist tbody").droppable({
      hoverClass: "ui-active",
      accept:".track",
      drop: function( event, ui ) {
        if($("#playlist tbody .nothing")) $("#playlist tbody .nothing").remove();//.style.display="none";
      }
    }).sortable({
      appendTo: document.body,
      cursor: "move", 
      helper: "clone",
      cursorAt: { top: 17, left: 80 },
    });
    $('.remove-td').click(function () {
    $(this).parent().parent().remove();
});
  });

如何删除使用jquery或javascript拖放后点击'✖'标记后将出现的数据。下面是工作js小提琴的链接 Js fiddle

Answer 1

只需在您的javascript中添加新功能

function removeRow(obj){       
   $(obj).parent().parent().remove();
    //or
   $(obj).closest(".track").remove();
}

删除以下代码

$('.remove-td').click(function () {
    $(this).parent().parent().remove();
});

将removeRow函数调用添加到您的所有X

<tr class="track"><td>Track 1<button onclick="removeRow(this)" class="remove-td" style="float:right;">✖</button></td></tr>

Answer 2

您正在动态使用元素。因此，必须以不同的方式定义click函数。

$(document).on('click', '.remove-td', function () {
  $(this).parent().parent().remove();
});

Answer 3

您需要使用 event-delegation 方法将事件处理程序附加到元素。

$('#wrapPls').on('click', '.remove-td', function () {
    $(this).parent().remove();
});

请勿使用$(this).parent().parent().remove()，因为它会移除<tr>，您将无法再删除到频道名称列。

如何使用jquery删除频道名称中的数据？

3 个答案: