CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jimmy
Jimmy

Reputation: 12507

How do I insert a "close" link in this list

I have this code:

// If JS enabled, disable main input
$("#responsibilities").prop('disabled', true);
// $("#responsibilities").addClass("hidden");

// If JS enabled then add fields
$("#resp").append('<input placeholder="Add responsibility" id="resp_input" ></input><input type="button" value="Add" id="add"> ');

// Add items to input field
var eachline='';
$("#add").click(function(){
    var lines = $('#resp_input').val().split('\n');
    var lines2 = $('#responsibilities').val().split('\n');
    if(lines2.length>10)return false;
    for(var i = 0;i < lines.length;i++){
        if(lines[i]!='' && i+lines2.length<11){
        eachline += lines[i] + '\n';
        }    
    }

        $('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li>");

    $('#resp_input').val('');
});

http://jsfiddle.net/ZTuDJ/40/

I'm trying to put a "remove" right aligned to each item which comes up in the list when a responsibility is added. This is the code I tried but it stops the javascript from working and seems to be crappy markup anyway. Can anyone point me in the right direction of how this should be done please.

JS

$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li><span class="right"><a href="#">Remove</a></span>");

CSS 

.right { float: right; }

Upvotes: 0

Views: 134

Answers (2)

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10189

This fiddle might help you!

JS

$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+" : <span class='right'><a href='#'>Remove</a></span></li>");

CSS

.right {
    float: right;
}

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

your code is messed up due to " in <span class="right"><a href="#">Remove</a></span>

As, you can't add other elements in UL except LI, you can add your remove inside of li

$('#responsibilities').text($("<div>" + eachline + "</div>").text())
.before("<li>"+$("<p>"+lines+"</p>")
.text()+" : <span class='right'><a href='#'>Remove</a></span></li>");

Demo ---> http://jsfiddle.net/ZTuDJ/42/

Upvotes: 2

Related Questions