Question

I have created a jqueryUI drag drop list. Now, i need to remove an object from it. I have used the following function for it:

function remove(el) {
$(el).hide();
$(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
$(el).parent().parent().fadeOut('1000');
setTimeout(function() {
    $(el).parent().parent().remove();
    });
}

And this is the code(the remove(this) function) through which this function is executed:

var html = '<div class="item i">';
html = html + '<div class="divrm">';
html = html + '<a onclick="remove(this)" class="remove '+itemid+'">&times;</a>';
html = html + '<div/>'+item+'</div>';

Suppose I have an element like this:

<div class="item" id="i2">
<img src="img/2.jpg"/>
<label class="title">Title</label>
<label class="weight">Heavy</label>
</div>

Now in the remove function, i need the text between the label having “.title” class. How can i do that? I have tried this but it does not seem to be working:

var remtitle = $(el).parent().parent().find(“.title”).val();

What am i doing wrong? I am fairly new to jquery so it might be an amateur mistake.

Answer 1

Use html() or text() instead of val() since a lable isn’t an input type:

var remtitle = $(el).closest('.item').find(".title").html();

Notice that addition of closest() function also, it helps find a parent easily rather than using parent() again and again. Also make sure to put your code in jQuery ready() handler.