CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Electronic Brat
Electronic Brat

Reputation: 143

Removing the <br> along with the corresponding <span>

I'm experementing with dynamic forms. I've created a text box with an 'Add' button and a div. Whenever a user types some thing in that text box and clicks add button, that value falls into the div with a span tag created dynamically. I've also provided edit and delete options. When ever delete option is clicked, entire span must get deleted. This is my logic.

This is how I've 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, the <span> gets deleted leaving behind the <br> in the same line. I've provided a linebreak at the end of each span tag, so that when the user enters a new value in the text box, a span tag with that value falls in the next line.

So, my problem is, when the delete button is clicked, the
in that line also should get deleted. But, I can't figure out how to do it. Can someone help me with this?

Upvotes: 4

Views: 1659

Answers (4)

Yosvel Quintero
Yosvel Quintero

Reputation: 19080

Will be better if you remove <br/> from your JavaScript code and move the span style css to a style sheet file and customize it with proper margin and display properties.

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

But will be even better to use a p tag instead of a span as it is a block tag.

Note also that you can remove from your JavaScript all the attributes href='javascript:void(0) from a elements and add a:hover css:

a:hover {
  cursor: pointer;
}

Upvotes: 1

Shrikant
Shrikant

Reputation: 94

as per my understanding you want to remove span and br.. So first delete
by $("#"+spanid).next().remove() and then delete span

Upvotes: 0

Māris Kiseļovs
Māris Kiseļovs

Reputation: 17295

You should place your BR tag inside SPAN so it can be simply removed together. Or better - get rid of BR tag at all and replace SPAN with DIV or style your SPAN as a block element so you won't need BR tag at all.

Upvotes: 0

vijayP
vijayP

Reputation: 11512

Can you try below line of code for deletion of your <span> tag:

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

});

Upvotes: 4

Related Questions