We Keep Coding

How to remove/add html tag in ng-repeat

is it possible to remove/add the html tag dynamically with condition in the javascript?
https://jsfiddle.net/kimsoon/Ldy9xhjt/3/
Example i need to remove the number 2 th column when button is clicked, insert back again when button is clicked. I have using this but does not work.
angular.element(document).find('.dataTable tfoot').remove($scope.items);///to remove
angular.element(document).find('.dataTable thead').prepend($scope.items);//to add

According to the Angular documentation on angular.element().find():
Note: Keep in mind that this function will not find elements by tag
name / CSS selector. For lookups by tag name, try instead
angular.element(document).find(...) or $document.find(), or use the
standard DOM APIs, e.g. document.querySelectorAll().
So, angular.element(document).find(...) can only be used lookup by tag name not class name.
Therefore, your code is not working because your .find() is not returning the element(s) you expect it to (in fact it's not returning any).
Use the DOM method getElementsByClassName to select using class name:
const dataTable = angular.element(document.getElementsByClassName("dataTable"));
Then you can perform your prepends or removals on the wrapped angular dataTable element:
dataTable.remove($scope.items); //to remove
dataTable.prepend($scope.items); //to add

Get multiple <p> elements with Jquery and add them to a div

I'm trying to extract multiple <p></p> elements and append them to a single div. I can only seem to get the first paragraph. Any idea?
I'm using this code:
$("#result").append($wikiDOM.find('p').html());

You don't need to use .html()
$("#result").append($wikiDOM.find('p')); //Remove .html()
When you use .html() it will give you the HTML of first element only, not all of the paragraphs in the jQuery set. But note that using append on an element that's already in the document will move it from its old location to its new one (whereas appending the HTML of an element just copies it).

You don't need to get the html() from the selected elements - you can append them directly:
$("#result").append($wikiDOM.find('p'));

Call element by id in javascript

I have a repeater and have a label with an icon inside it.
<strong><i id="iconProperties" class="icon-caret-right"></i> Properties</strong>
When i click a button the icon-caret-right must be turned to icon-caret-down. i have written the code as follows:
$('#iconProperties').removeClass('icon-caret-right').addClass('icon-caret-down');
When i use this code only the first row of the repeater is working. all other rows's icons are not changing. What is the mistake?

ASP.net generates unique ids for html elements and only one element can have id iconProperties that you used in selector. You can use Attribute Contains Selector [name*="value"] instead of id selector to get all the matching elements.
$('[id*=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');

If your ids have a similar name, you're probably after something like
$('[id^=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');
Which will update all items beginning with id "iconProperties".
It might be worth noting that it is common practice to use unique ids.

Try this:
$('#iconProperties').find('.icon-caret-right').replaceWith('.icon-caret-down');

Append jQuery values not affected by javascript

I'm appending values into a div through jQuery, but I've realized what gets appended isn't affected by my javascript functions.
$(".div").append("<input type='text' class='textForm' placement='Value' />");
What I have setup in my javascript code is that it takes the attribute placement of any class "textForm" and makes it a value. But I've realized that once a value is appended, it isn't effected by my javascript. Any ideas on how to fix this issue?

If you are currently using
$(".textForm").click(){}
then now use
$(document).on("click",".textForm",function(){//Dtuff here})
This will attach the .on("click") to the document object and as such it will be enabled on all elements that exist and all elements that are created matching the .textForm selector.

I guess you have some events bounded to some elements like which are not working after the append . something like this.
$(function(){
$(".someClass").click(function(){
//dome some thing
});
});
If you want the same functionality to work on the newly injected( dynamically added via append /jquery ajax etc...) DOM elements, you should consider using jquery on. So your code should be changed like this
$(function(){
$(document).on("click",".someClass",function(){
//dome some thing
});
});
on will work for current and future elements

I'm not sure I understand the bit about why you're copying values from the placement attribute into the input value, but I can offer this suggestion to get your form fields to appear.
$("div").each(function() {
$(this).append($("<input type='text' class='textForm' placement='Value' />"))
});
I'm assuming that you want to identify your div via the tag name, and not the class name. If this is the case, your jQuery selector will need to be "div", and not ".div". Also, you need to wrap your HTML in $() in order to generate a DOM element.

Jquery doesn't apply hide() to all of the divs with the same ID

I'm making a site, and the html is displayed through php with data fetched from a database.
I have a foreach() function, so all of the things displayed have the same DIV ID's.
It ends up being like 4 DIVs with the same ID (#content), so the PHP works fine, but I have a jQuery script and when I call the jQuery("#content").hide(); it only hides ONE of the DIV's not all of them, and I want it to hide all of them. Is there something else I have to do?
Thanks.

You should use a class (.class_name), not an id--only one DOM element may have a given ID, otherwise it's invalid HTML. It's reasonable for an ID selector to return only a single element.

IDs on elements on a page should be unique. So every HTML tag you specify should have a different ID. If you want to hide all of a certain element, it might be suitable to add a class to the elements you wish to hide?
e.g.
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
Then your jquery would be:
$(".divToHide").hide();

That's simply because you cannot have more than one element with a specified ID. IDs are and must be unique. Only one single element with the same element may exist in a DOM.
Failing to follow this rule may result in broken scripts and other horrors.
You can use classes for this purpose.

an ID can only be used ONCE in HTML! because its a id and a id should always be Unique