Delete along with the corresponding <span>

Question

I am experimenting with dynamic forms. I created a text box with an add button and a div. Whenever the user enters something in this text box and presses the add button, this value falls into the div with the dynamic span tag. I also provided editing and deletion options. When the delete option is clicked, the entire range must be deleted. This is my logic.

Here is how I tried:

$("#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);
        });
    }
});

Whenever I click the "Delete" button, it is deleted <span>, leaving behind <br>in the same line. I have provided a line at the end of each span, so when a user enters a new value in a text field, a span with that value will go to the next line.

, , . , . - ?

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

, <br/> JavaScript CSS span .

$('.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

You must put your BR tag inside the SPAN so that you can simply remove it together. Or it’s better to get rid of the BR tag altogether and replace the SPAN with a DIV or create your SPAN as a block element so that you don’t need the BR label at all.

Answer 4

according to my understanding you want to remove span and br. So first uninstall
with $("#"+spanid).next().remove()and then uninstall span