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.

JS and/or D3 Methods of storing Dynamic User Inputs

My question is similar to the one posed here: storing user input in array
My use case is different in one crucial aspect, I do not have static inputs. At any one time, there could be anywhere from 1 to 3 user number inputs on my page. They are also removed dynamically too, so I can't just create them all, then style them as needed something like using display:hidden;.
My question is: What is a js solution that can store user inputs into an array robust to inputs that may or may not have been appended without an if clause for each array in the event the element hasn't been appended yet(!==null).
Or if d3 has a simpler approach than native javascript to store number inputs into an array, that would be an acceptable answer too. I postulated this selection: d3.selectAll('#input1,#input2,#input3') but I'm not sure if values can be retrieved and stored in an array from such a selection.
Here is a worked-out example:
The document could potentially have 3 inputs, but lets say the current state of the document only has 2 inputs with IDs: #input1 and #input2. So I need to store the values of the existing inputs, and a 0 for #input3 because it has not been created yet. I'm not sure how to create an array comprehension with these requirements. I was thinking something like:
my_array.push(d3.selectAll('#input1,#input2,#input3').each().value())
But like I said above, I want the array to contain the value for each input. push() would just add another item to the array. The array would exceed 3 values if the event listener was triggered more than 3 times, which is not what I want. I just want an array that is updated with the current values of all existing number inputs (and a value of 0 if input has not been appended yet).

Your question is not exactly clear, but it seems to me that you want to get all the values of the inputs, without knowing how many of them you have on the page.
If that's the case, you can simply use...
d3.selectAll("input[type=number]")
..., which will get all the inputs present on the page when you call the function.
Here is a demo, look at the console:
d3.select("button").on("click", function() {
var inputs = [];
d3.selectAll("input[type=number]").each(function() {
inputs.push(this.value);
})
console.log(inputs);
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="form">
<h1><b>Please enter data</b></h1>
<hr size="3" />
<br>
<label for="input 1">Input 1</label>
<input id="input1" type="number">
<br>
<label for="input 2">Input 2</label>
<input id="input2" type="number">
<br>
<label for="input 3">Input 3</label>
<input id="input3" type="text">
<br>
<hr>
</div>
<button>Submit</button>

Char counter not updating when opening modal

I have a page with an option to insert names.
Basically you click in the add button, a modal with an input and a char counter opens and you type what you want, click in the add button bellow the input and that name is added to the page. You can creat as many as you want.
The problem is: the char counter in the modal only updates when the input is focused. If your first name has let's say 5 letters, when you try to add a second name, the modal opens empty, but the char counter shows 75chars left instead of 80 until you click in the input, then goes back to 80 like it should.
Also, when you try to edit an existing name, the char counter shows 80 left even tho there's a name already in the input. Then again, when you click in the input, the counter updates to the correct value.
This is a sample from the code, even tho you can't see a preview, it has the code related to the problem:
https://embed.plnkr.co/rDbeal3nFmeitXQEkP55/

There's no need to listen for keyup and change events nor for the function updateCount, all you need to do is use ng-model, like this:
<div class="form-group" ng-class="{ 'has-error': revenue.name.$invalid }">
<label>{{ 'revenues.form.name.label'|trans }}</label>
<input name="name" type="text" class="form-control" ng-model="model.name" ng-required="true" maxlength="80" placeholder="{{ 'revenues.form.name.placeholder'|trans }}">
</div>
<span>You have {{80 - model.name.length}} characters left.</span>
Here is a working plnkr.
UPDATE:
If you want the span to change color based on the char count, just use ng-class:
<span ng-class="{'red-text': model.name.length >= 70, 'green-text': model.name.length == 10}">You have {{80 - model.name.length}} characters left.</span>
red-text and green-text are sample css classes:
.red-text{
color:red;
}
.green-text{
color:green;
}
Here's the updated plunk

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/

required field for checkboxes

I have added list of checkboxes in following way. And I have added required property also. Because user should select at least one checkbox.
<div ng-repeat="student in vm.students">
<label class="checkbox-inline">
<input type="checkbox" value="{{studentName}}" ng-model="student.selected" name="students" required>
{{sim.name}}
</label>
</div>
<div data-ng-messages="userform2.simulations.$error" data-ng-if="vm.interacted(userform2.simulations)" class="error-messages">
<div data-ng-message="required">You should select atleast one sim.</div>
</div>
But this one doesn't work. It works for last checkbox only. If check and uncheck the last one the error message is appear, It doesn't look whether other checkboxes are selected or not. Any possible way will be highly appreciable.

In angular you should use ng-required=true to set 'required' on the input
The docs:
https://docs.angularjs.org/api/ng/directive/input

Follow this link
CheckBox List
you will get the answer ithink you missed checklist -value or you need validation on it for select one check box.
for validation take full list and check every property if any no value is checked then generate a message for it.
I hope it will be help to you