Develop Reference

How to target a data-ref with a specific value and add a style using javascript

I want to target a data-ref with a specific value and add an inline style="display:none;" to it.
How can this be achived? Can someone help me please?
This is how it looks:
<div data="{test-bubble}}" data-ref="bubbles[test-link.com/test]" class="bubbles" state="default">
</div>
I tried this but it does not work:
var bubbleremoval = document.querySelector('[data-ref="bubbles[test-link.com/test]"]')
bubbleremoval.style.display = "none";

"""Your code should work if you are applying to a single element since query selector returns one element but for several elements you could fetch by classname and loop through the elements and remove display for each"""
var bubbleremoval = document.getElementsByClassName('bubbles')
for (let i = 0; i < bubbleremoval.length; i++) {
bubbleremoval[i].style.display = "none";
}

Changing a dynamically created label's text with keyup() issue

I am creating a form dynamically and therefore edit the form elements’ properties. When attempting to change the label, assigning an auto-generated id works fine but when changing this label using the generated id, the function or keyup() from jQuery keeps calling all the previously created label id(s). this means when i want to edit one label, it ends up editing every label.
HTML
<input type="text" id="change-label"><br><br>
<button id="add-button">add label</button>
<div id="add-label"></div>
JavaScript/jQuery
$('#add-button').click(function(){
var div = document.createElement('div');
var textLabel = document.createElement('label');
var labelNode = document.createTextNode('untitled');
textLabel.appendChild(labelNode);
textLabel.id = autoIdClosure();
$('#change-label').val('untitled');
div.appendChild(textLabel);
$('#add-label').append(div);
});
var autoIdClosure = (function(){
var counter = 0;
var labelId = "textInputLabel";
return function(){
counter += 1;
var id = labelId + counter;
editLabelWrapper(id)
return id;
}
})();
function editLabelWrapper(id){
function editLabel(){
var value = $(this).val();
$("#"+id).text(value);
}
$("#change-label").keyup(editLabel).keyup();
}
I’ve already found an alternative using onkeyup="$('#'+globaID).text($(this).val());", but I need to understand what I was doing wrong so I can learn from it.
JSFiddle

I think you are overthinking the matter...
Instead of using an unique id, rather use classes, makes it easier to handle.
So change <div id="add-label"></div> to <div class="add-label"></div>
Then what you want to do is, when a value is given in #change-label you want it in the last div.add-label.
So the function will become this:
$("#change-label").on('keyup', function() {
$('.add-label:last').text( $(this).val() );
});
Next what you want to do is bind a function to #add-button. Once it gets clicked, we want to add a new div.add-label after the last one. And empty the #change-label. You can do that by using this function:
$('#add-button').on('click', function() {
$('.add-label:last').after('<div class="add-label"></div>');
$('#change-label').val('');
});
Updated Fiddle

Javascript (vanilla) - How to specify the type of an element when using querySelectorAll?

How can I specify the type of an element when using querySelecterAll()?
For example, I want to select all the input fields where type=text in a form. Not for styling but for functionality.
This is what I have right now:
var inputGroup = document.getElementById('contactForm');
var inputs = inputGroup.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("blur", checkInput);
}
function checkInput() {
this.value === "" ? this.className = "error" : this.className = "valid";
}
Right now I am also targeting the inputs where the type is set to submit, radio etc. But I just want to target the input elements where the type is set to text.

You can use the attribute selector syntax directly in the call to querySelectorAll:
var inputs = inputGroup.querySelectorAll('input[type="text"]');
This however may miss <input> tags that don't have the type attribute specified at all. You can work around this by also picking up the <input> tags without it in your selector:
var inputs = inputGroup.querySelectorAll('input[type="text"],input:not([type])');

What is wrong with my Javascript?

This is my jsfiddle(http://jsfiddle.net/mZGsp/). I was trying to answer a question here but my code won't work. Here is the code:
JS
var stateOfClick = null;
function initiateLine(){
document.getElementById('test').innerHtml = "Started";
}
function endLine(){
document.getElementById('test').innerHtml = "Line Ended";
}
function createLines(){
if(!stateOfClick) {
initiateLine();
stateOfClick = 1;
} else {
endLine();
}
}
HTML
<body>
<input type="text" id="test" onclick="createlines()">
</body>

A couple of things,
change createlines() to createLines (camel-case).
change <element>.innerHtml to <element>.value
Inside JSFiddle, don't wrap your code inside a function, as then createLines won't be global which it needs to be for the onclick to work.
Here's a working example.

Not even this simple example will work on jsFiddle. You need to attach the event listener with JavaScript:
document.getElementById("someElement").onclick = function() {
//Do stuff
}

For input element you must use the value attribute not the innerHTML field.
function initiateLine(){
document.getElementById('test').value = "Started";
}
also you've misspelled the innerHTML function (though not the primary problem). innerHTML is used for html elements that can contain other elements such as a div containg a p element. Input and option elements all have a value attribute that can be used to extract or set their values.

How to remove input field that was inserted via JavaScript

Someone please help me how to add new function to remove the field, i have js script function that add new field as follows
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
var htmlText = " <input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
var newElement = document.createElement('div');
newElement.id = 'new_field';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('new_field');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 10 fields allowed.");
document.form.add.disabled=true;
}
}
</script>
but i need some helps to add new functions for removing field, For any suggestion and pointer I Would be appreciate.

Read here about removeChild() function removeChild() - mozilla developer
Edit Or here: removeChild() w3schools

First of all, there's already one problem I see with your code. You are setting each new field's ID to the same value, which is invalid HTML and asking for trouble. Be sure to fix that.
The .removeChild method of DOM elements is what you want. .removeChild will remove a node (element or text) from the DOM tree (the set of elements actually contained within the document) only if the node passed in is actually a child of that element, otherwise an error occurs.
You can easily remove the last field by finding the last child of its container:
function removeLastField() {
var fieldsArea = document.getElementById('new_field'),
lastChild = fieldsArea.lastChild;
if(lastChild) {
fieldsArea.removeChild(lastChild);
fields -= 1;
}
}