javascript - 删除 以及相应的

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

});