We Keep Coding

Can't select and hide any previous element

I'm about lose my mind with this problem. No form of jQuery selector seems to work in dynamically finding any elements above the link. I'm trying to access an element above the link and hide it. Using things like parent(), prev(), before(), closest(), ect. will show a non-null object but it won't respond to the hide() method.
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>
function remove_fields(link)
{
$(link).prev("input[type=hidden]").val('1'); // this doesn't work
var divToHide = $(link).prev('div');
$(divToHide).hide() // this doesn't work
//$('#test_fields').hide(); //this works
}

Try replacing the link as below:
Remove Ingredient
I'm not sure. But maybe this is the problem. Because I remember that I have had problem with 'this'previously and when I replaced that, it performed the job.

you can try .closest() and .find()
function remove_fields(link) {
$(link).closest('div[class^="col-xs"]').find("input[type=hidden]").val('1');
var div_to_hide = $(link).closest('div[class^="col-xs"]').find('#test_fields');
$(div_to_hide).hide();
//$('#test_fields').hide(); //this works
}

You can't change hidden input's "value" attribute by using .val(). You need to use:
$(link).prev("input[type=hidden]").attr('value', '1');
As I'm not really sure what do you want to do with this input, I'll just let it go like this.
.prev() fn goes only one previous element in the structure. As input is a <a>'s previous element, you can't select div like that. You can use .siblings() for instance.
$(link).siblings('div').hide();

If you break the code in pieces, it gets easier.
First I took the 'Link', from it I grabbed the nearest div above it, then I picked up the input.
I did not make many changes to your code.
function remove_fields(link)
{
var $link =$(link);
var $divToHide = $link.closest('div');
$divToHide.find("input[type='hidden']").val('1');
$divToHide.hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>

find and replace certain attributes using cheerio

I have a html fragment similar to this
<div class="form-row">
<input type="text" id="foo1">
</div>
<div class="form-row">
<input type="text" id="foo2">
</div>
<div class="form-row">
<input type="text" id="foo3">
</div>
and I wanted to use cheerio to change the id tag to foobar[1,2,3]
my code is
var cheerio = require("cheerio");
var $ = cheerio.load("html as above");
var inputs = $('input[id]');
Object.keys(inputs).forEach(function(key,index) {
if (key == index) {
console.log(key,inputs[key])
//#1
});
at this point (//#1), I wanted to get the value of the id attribute, and according to the docs at https://github.com/cheeriojs/cheerio I can use the .data method to get and change the attribute in the element, but
inputs[key].data("id")
gives me a "TypeError: undefined is not a function" error
I know that I'm missing something simple, but can't see the wood for the trees and would appreciate some pointers.
thanks
update #1
just when I think I've got a grip on this, it slips from my fingers ..
now, I want to move an element :
I have
<label>xyz<i class="fa fa-list"></i></label>
and I want
<label>xyz</label><i class="fa fa-list"></i>
the code - that doesn't work ;) - is this
var icons = $('label i');
icons.each(function(index,icon) {
// #2 now that I've got an element what now ?
}
I know that icons.remove() will delete the element(s) but struggling to get them added to the right place.

The problem is inputs[key]) will be a dom element reference, which will not have methods like data()
Try to set the attribute value like
var cheerio = require("cheerio");
var $ = cheerio.load('<div class="form-row">\
<input type="text" id="foo1">\
</div>\
<div class="form-row">\
<input type="text" id="foo2">\
</div>\
<div class="form-row">\
<input type="text" id="foo3">\
</div>');
var inputs = $('input[id]');
inputs.attr('id', function(i, id){
return id.replace('foo', 'foobar')
});
console.log($.html())

get html element value under another html tag

how can i get that label tag input type="text" value?
This is not my code and the structure can't be altered
<div id="test">
<label class="control input text">
<span class="wrap">startdate</span>
<input type="text">
<span class="warning"></span>
</label>
</div>

Assuming you don't need to support anything below IE8, you can use document.querySelector to select that specific input element and then get its value via its .value property:
var value = document.querySelector('#test label.control input').value;

Just like that
var value = document.querySelector('#test .control input').value;

you can do that in jQuery
var html = $('#test lable').html();

Get the text within children nodes using jquery

I have the following html page structure:
<div class="result-row clearfix">
<span>Name1</span>
<span>city1</span>
<span>phone1</span>
<span>details1</span>
</div>
<div class="result-row clearfix">
<span>Name2</span>
<span>city2</span>
<span>phone2</span>
<span>details2</span>
</div>
...
... many such similar divs
And I got simple input field from the user
<label for="name">Name</label> <br />
<input type="text" name="name" autocomplete="off" /> <br />
<label for="city">City</label> <br />
<input type="text" name="city" autocomplete="off" /> <br />
On it's blur event, I would like to make invisible all such div's that does not have the text to be searched and just show the div's that has matched (i.e. the div that has the text within the span tag).
I am not able to retrieve and match this using jquery. I have tried the following:
var nodes = $(".result-row");
console.log("Nodes length: "+nodes.length); // Displays the correct number of child nodes
for(var i=0;i < nodes.length; i++) {
var cur = nodes[i];
console.log(cur); // Displays '#text' in browser js console log.
console.log(cur.childNodes[0]); // Gives undefined. Expecting to get the 1st span tag here.
}
EDIT
I need to display the rows that has the span with matching text. Have updated the html little bit, Please refer to the updated question.
I am able to get the complete data as text of all the span's combined. Is there any way to get the array of spans inside the particular div?

You can use :contains selector:
var $row = $('.result-row');
$('input[type=text]').blur(function() {
var val = this.value;
$row.hide();
$row.has('span:contains("'+val+'")').show()
})
http://jsfiddle.net/x3VtX/

nodes[i] is a jquery object, which doesn't have childNodes property i guess.. so you should be using nodes[i].get(0).childNodes instead...

jQuery val() method not working

I wanted to read the value entered in the text box in one of my HTML form, for this I tried jQuery val() method, but it is not working, any idea why?
HTML:
<form method="POST" id="payment-form">
<p>
<label class="card-number" for="txt_cardno"><span>Card Number:</span></label>
<input type="text" size="20" autocomplete="off" class="card-number" id="txt_cardno" name="cardno" />
</p>
<p class="submit submit-button"><a class="btn" href="#">Charge Card</a><br><a class="btn" href="#" onClick="return false">Go Back</a></p>
<div class="clear"></div>
</form>
Javascript:
$(document).ready(function() {
$(".submit").live("click", function(e) {
e.preventDefault();
var card_num = $('.card-number').val();
alert(card_num);
});
});
the jsfiddle is http://jsfiddle.net/74neK/1/

Use the id to access it (faster):
var card_num = $('#txt_cardno').val();

You've given both the <label> and the <input> the "card-number" class.
Specify the input in the selector. Otherwise .val() gives you the value of the first element found (the label).
var card_num = $('input.card-number').val();
http://jsfiddle.net/74neK/3/
If you're really concerned with micro-optimization, you should use native methods:
var card_num = (document.getElementById('txt_cardno')||{}).value;
http://jsfiddle.net/74neK/5/

Your <label>'s class is the same as your <input>'s, so jQuery is trying and failing to retrieve the value of your <label>. Instead, refer to your <input> by name or id:
$('#txt_cardno').val()
I would recommend ID regardless, because jQuery optimizes it to document.getElementById, which is much faster.

Try to use the ID to access the element:
var card_num = $('#txt_cardno').val();
http://jsfiddle.net/74neK/4/ <- Example

Select the id of your input element, as opposed to the class: http://jsfiddle.net/btgxu/