Develop Reference

Javascript - remove a sentence from an element (w/o id/class) but leave the rest of the content

I'm trying to make a greasemonkey script which I will use at one website to fill in the form. I don't own the website. Main purpose is to remove the 'clutter' of 'informational texts' and only leave input/select fields.
Problem here is that paragraph doesn't have a class or id attached to it. It does have a sentance which I want to remove, BUT paragraphs also has an INPUT along with that sentance inside the same paragraph. I want INPUT to stay but sentence to be removed.
The form at the website has multiple paragraphs with the same 'issue', so it is not one 'issue' per one form. Also sentences are different per different paragraphs. Here is a simplified version of how it looks like:
<div id="shop_info">
<p>
32. Enter the store's name/logo
<input id="store_name" type="text" name="store_name">
</p>
<p>
33. Enter the store's phone number
<input id="store_phone" type="text" name="store_phone">
</p>
</div>
^ In the above example I need these sentences removed:
32. Enter the store's name/logo
33. Enter the store's phone number
So, after the script is done its work, it should look like this:
<div id="shop_info">
<p>
<input id="store_name" type="text" name="store_name">
</p>
<p>
<input id="store_phone" type="text" name="store_phone">
</p>
</div>
...and if there is a way to get INPUTS out of paragraphs (which are now not-needed), it would be best if it can end like this:
<div id="shop_info">
<input id="store_name" type="text" name="store_name">
<input id="store_phone" type="text" name="store_phone">
</div>
...but I will be happy even with the first solution (if INPUTs stay inside paragraphs, I just need these sentences gone).
I looked around, but the code examples that I have found didn't worked, because most of the solutions 'search' for a single text word and not the whole sentences. I pasted just a simplified code of that page. There are many more paragraphs which have INPUT nested inside them.
Does anyone have an idea how to solve this?
Thanks in advance!
EDIT:
I've checked some codes that some of you provided. For some reason, even if it works at codepen or other 'script testing' sites, the code doesn't work once I implemented it in my greasemonkey script. I have decided to show you how the form looks like on the website itself. Its an Amzn site, for microworkers. Here is the page with form itself:
page in question at Amzn microworkers website
Here is the imgur gallery that has 3 images:
imgur gallery with 3 images
1st image: how the whole page looks like
2nd image: what I got till now
3rd image: what I'm trying to achieve (thats why I created this question)
I hope I've made yoru life littlebit easier now, so you can (if you want) test the codes directly at the webpage itself.
Thanks again for all your help!

This snippet may be useful, Have added comments to describe the steps
//get the parent element by the id
let getElem = document.getElementById("shop_info");
// get all the paragraph using querySelectorAll &
//iterate over it using forEach;
getElem.querySelectorAll('p').forEach(function(item) {
// get the input element, this will be appended later
let getInput = item.querySelector('input');
// empty the p element
item.innerHTML = "";
// append the input back to the paragraph
item.appendChild(getInput);
})
<div id="shop_info">
<p>
32. Enter the store's name/logo
<input id="store_name" type="text" name="store_name">
</p>
<p>
33. Enter the store's phone number
<input id="store_phone" type="text" name="store_phone">
</p>
</div>

you can try this with jQuery
$(function(){
var $inputs = $('#shop_info input');
$('#shop_info').empty();
$inputs.each(function(k, v){
$(this).appendTo('#shop_info').wrap('<p/>');
});
});
here's the example https://codepen.io/anon/pen/oqKgWy

If I understand correctly, you want to clean up <form> elements, you want to remove all non-<input> and non-<select> elements from them.
If that is the case, you can do something like this:
var holder = [];
$("input, select, button").each(function(){
holder.push({parentForm: $(this).parents("form"), elm: $(this)});
}).detach();
$("form>").remove();
holder.forEach(elm => {
elm.parentForm.append(elm.elm);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="shop_info">
<p>
32. Enter the store's name/logo
<input id="store_name" type="text" name="store_name">
</p>
<p>
33. Enter the store's phone number
<input id="store_phone" type="text" name="store_phone">
</p>
</div>
</form>
What this does is to first go through all input, select and button elements, keep track of what their parent form element is, detach them. Then, remove all elements from the forms and attach back the input, select and buttonelements.

I have updated my post with new information. I've also included the link to the page itself that I'm trying to modify. At the imgur gallery, last image (3rd from the top) is what I'm trying to achieve with the code that I'm seeking to find from your answers on this (OP) question here.

Trying to make a rename feature for a list/table

I want the user to be able to change the name of a list/table
<div class="col-md-6">
<form method="post">
<h1>
<b>
<input type="text" value="Group" id="groupName">
</b>
</h1>
<input type="submit" value="Change Name">
</form>
</div>
https://jsfiddle.net/bqgqhxs2/
i only put up the bare minimum code to hopefully get my point across.
i have a "hidden" text box and a submit button and i want the value that the user inputs into the text box to become the new value preferably without having to reload the page.
how would i go about implementing that? or is what I'm asking for even possible?
also if anyone has any other suggestions for a "rename" feature I'm all ears, the overall project is going to be implemented into meteor so if someone has a meteor solution that would be great but I'm only worrying about one problem at a time.

You can use the blur method to take the new name typed into the input.
$("#groupName").on( "blur", function() {
//change the id here
$("table").attr("id", $(this).val() )
//or the value of an element
$("table").attr("value", $(this).val() )
})
No need for the button to change the name of the table
fiddle https://jsfiddle.net/bqgqhxs2/2/

Programmatic creation of elements using Angular in the context of templates

I am using Angular.js for the following project. Using a template document, the
application renders paragraphs using user-input in a fill-in-the-blanks style.
So there are fields that the user must fill, let’s call them Blanks. Those
fields, inside the paragraphs, are highlighted so the user knows they can
interact with them. They can be of type date, email, text or
radio select. When they are clicked, I want to display, next to the
paragraph, a little panel containing a description of or instructions on how to
fill the field followed by the form element.
I would like to use a readable format for the HTML templates so I can mix
regular text with Blanks. I was thinking of using attributes on div elements
to specify the description of the element and the placeholder or the default option.
Here is how I started :
<div class="chapter" title="Colours">
<div class="article" title="Blue">
Blue is a special colour because it gives me particular emotions. First
of all, I feel
<a href=""
class="blank"
ng-click="selectQuestion()"
doc-question="How does blue make you feel?"
doc-type="text"
doc-placeholder="like there is a wind in my ear."
doc-data="colour.blue.feeling"
>[[colour.blue.feeling]]</a>.
Second of all, blue reminds me of
<a href=""
class="blank"
ng-click="selectQuestion()"
doc-question="Pick the thing blue reminds you of"
doc-placeholder="the sky".
doc-choices="the sky, the sea, the ocean"
doc-type="radio"
doc-data="colour.blue.memory"
>[[colour.blue.memory]]</a>
like the first time I experienced the colour which was on
<a href=""
class="blank"
ng-click="selectQuestion()"
doc-question="Select a day"
doc-placeholder="01/01/2015"
doc-type="date"
doc-data="colour.blue.date"
>[[colour.blue.date]]</a>.
</div>
</div>
Then there would be a hidden, automatically generated form which binds the
input elements to the data inside the anchor elements with class 'blank' :
<form>
<div>
<h2>How does blue make you feel?</h2>
<input type="text" ng-model="colour.blue.feeling">
</div>
<div>
<h2>Select a day</h2>
<input type="text" ng-model="colour.blue.date">
</div>
<div>
<h2>Pick the thing blue reminds you off</h2>
<input type="radio" ng-model="colour.blue.memory" name="colour.blue.memory" value="the sky" >the sky<br>
<input type="radio" ng-model="colour.blue.memory" name="colour.blue.memory" value="the sea" checked>the sea<br>
<input type="radio" ng-model="colour.blue.memory" name="colour.blue.memory" value="the ocean"> the ocean
</div>
</form>
Does this problem have a name?
Is my approach reasonable?
How can I programmatically create the form and bind the fields to it (of
course, I am not expecting code here, unless you can show me something similar).
To display only the part of the form that is of interest, with jQuery,
I would hide all the divs in the form then detach the form and re-attach it to the
div that is the Blank’s parent. Then I would show the div containing the relevant
input(s) by selecting it using a distinctive attribute, invoke jQuery’s show()
and it is done. How would I accomplish this using Angular?
Thank you very much for your help.

Is there a label in HTML

i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.

You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.

The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.

A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.

HTML Select and Text Input

We have all seen countless instances of forms with a select drop down having one of it's options as "Other" and on choosing that option, we get to see a input text box (which was hidden all along) asking us to type in our input.
Is there a better way to implement this? Are there plugins out there which will let me do this better? Or are standard HTML elements suffice (some setting to a select tag, may be) ?

You could use datalist. Example:
<input list="cookies" placeholder="Type of Cookie"/>
<datalist id="cookies">
<option value="Chocolate Chip"/>
<option value="Peanut Butter"/>
<option value="Raisin Oatmeal"/>
</datalist>
Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/
This gives the user the ability to select from a list of cookies and, if the type of cookie they seek is not found in the list, enter their own.
My only beef with it in your situation is that it may not be immediately obvious to the user they can use it as a drop down. But that could be easily remedied with a little bit of css.

An editable combobox might be a good alternative. The challenge is to style it in such a way that it is clear to the user that he can actually edit the contents of the control, rather than only selecting the provided default contents.

That's a fairly common way to design a form both on paper and on the web.
I'm not quite sure exactly what you mean with a better way to do so...
If you're worried about the hidden field not appearing if the user has javascript disabled, I'll suggest you hide the field using javascript or have a duplicate "If other please specify" text area in a noscript block:
<select><!-- implemented something like rahul showed -->
<noscript>
<label for="ifOtherInput">If other please specify</label>
<input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
<!-- Here we know the user selected other so we can just have this label: -->
<label for="ifOtherInputJs">Please specify</label>
<input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>
The backend must handle that the input in the noscript block may be missing. Or you could add the javascript version of the input to the page of the input using javascript (so both cannot possibly appear simultaniously so that they can have the same name.