Question

我正在使用动态表格。我创建了一个带有“添加”按钮和div的文本框。每当用户在该文本框中键入某些内容并单击“添加”按钮时，该值将落入具有动态创建的span标记的div中。我还提供了编辑和删除选项。单击删除选项时，必须删除整个范围。这是我的逻辑。

这就是我尝试的方式：

$("#AddBtn").click(function () {
    if ($("#PickList_Options").val() == "") {
        alert("Please enter an option");
    } else {
        if ($("#AddBtn").val() == "Add") {
            var optionvalue = $("#PickList_Options").val();
            $("#mydiv").append("&nbsp&nbsp<span id='span" + a + "' class='editbutton'>" + optionvalue + "&nbsp&nbsp&nbsp&nbsp<a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='remove" + a + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='edit" + a + "' style='display: none; margin-right:10px;'></i></a></span><br/>");
            a = a + 1;
            $("#PickList_Options").val("");
        } else if ($("#AddBtn").val() == "Update") {
            $("#" + spanid).text($("#PickList_Options").val()).append("&nbsp&nbsp&nbsp&nbsp<a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='" + removebuttonid + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='" + editbuttonid + "' style='display: none; margin-right:10px;'></i></a>");
            $("#AddBtn").val("Add");
            $("#PickList_Options").val("");
        }

        $('.remove').click(function () {
            removebuttonid = $(this).attr("id");
            alert(removebuttonid);
            var spanid = removebuttonid.replace('remove', 'span');
            alert(spanid);

            $("#" + spanid).remove();

        });

        $(".edit").click(function () {
            addButtonValue = "Update"
            $("#AddBtn").val(addButtonValue);
            editbuttonid = $(this).attr("id");
            alert(editbuttonid);
            spanid = editbuttonid.replace('edit', 'span');
            alert(spanid);
            var value = ($("#" + spanid).text()).trim();
            $("#PickList_Options").val(value);
        });
    }
});

每当我点击删除按钮时，<span>都会被删除，并在同一行中留下<br>。我在每个span标记的末尾都提供了一个换行符，这样当用户在文本框中输入新值时，带有该值的span标记就会出现在下一行中。

所以，我的问题是，当点击删除按钮时，该行中的
也应该被删除。但是，我无法弄清楚如何做到这一点。有人可以帮我这个吗？

Answer 1

您可以尝试使用以下代码行删除<span>代码：

$('.remove').click(function(){
    removebuttonid = $(this).attr("id");
    alert(removebuttonid);
    var spanid = removebuttonid.replace('remove', 'span');
    alert(spanid);   

    $("#"+spanid).next("br").remove(); //remove immediate next br tag
    $("#"+spanid).remove(); //remove target span tag

});

Answer 2

如果从JavaScript代码中删除<br/>并将span样式css移至样式表文件并使用适当的边距和显示属性对其进行自定义，则会更好。

$('.remove').click(function () {
    removebuttonid = $(this).attr('id'); // check this var is already defined
    var spanid = removebuttonid.replace('remove', 'span');
    $('#' + spanid).remove();
});

但使用p代码而不是span会更好，因为它是一个块标记。

另请注意，您可以从JavaScript中删除href='javascript:void(0)元素中的所有属性a并添加a:hover css：

a:hover {
  cursor: pointer;
}

Answer 3

您应该将BR标记放在SPAN中，以便可以一起删除它。或者更好 - 完全摆脱BR标签并用DIV替换SPAN或将SPAN设计为块元素，这样你根本不需要BR标签。

Answer 4

根据我的理解，你想删除span和br ..所以先删除$("#"+spanid).next().remove()，然后删除span

删除<br/>与相应的<span>一起删除

4 个答案: