Array jQuery - Remove indices and concatenate html

Asked

Viewed 135 times

3

I’m performing an ajax call that retouches the Html filters to be put in a certain div.
However, I would like to remove some elements of html previously. I passed the html to jQuery, thus transforming it into an array.
After removing the elements I would like to resume the concatenated html.

Currently I’m doing so:

msg = jQuery(msg);
var index = 0;
var html = '';
msg.each(function(i, _this){
    if(jQuery(_this).find('input[type="submit"]').size() == 1){
        index = i;
        return;
    }
});
msg.splice(index,2);
msg.each(function(){
    html += this.outerHTML
});

Example

But I’m not very happy with the development, someone would know how to make that function better?

javascript jquery

  • If you want to remove all elements of type Submit, pq do not select using msg as context and remove all elements returned by select

  • Tobymosque’s answer is a satisfying way to do it, but you may be wondering: what if msg not yet in the DOM? Well, as Javascript is synchronous, you can add msg to the DOM, to do the operations you want, and even to remove from the DOM afterwards, that all this will happen without any visual artifact on the screen (i.e. the IU will only be updated after your Javascript code returns). Just remember to adapt the selector to take into account the element (maybe temporary) you added msg, if necessary.

2 answers

3


Give you two pieces of advice:

  1. jQuery is not a mandatory tool to manipulate the DOM.
  2. You don’t need to recreate all the elements in order to remove a node.

var submits = document.querySelectorAll("p input[type='submit']")
[].forEach.call(submits, function (elemento, indice) {
  elemento.parentNode.removeChild(elemento);
});
<p class="left">
	<input name="teste1" type="text" />
</p>
<p class="left">
	<input name="teste2" type="text" />
</p>
<p class="left">
	<input name="teste3" type="text" />
</p>
<p class="left">
	<input name="teste4" type="text" />
</p>
<p class="left">
	<input name="teste5" type="text" />
</p>
<p class="left">
	<input type="submit" />
</p>

  • 1

    That one slice is just to turn a nodeList into an array? If it is, you can also just do it [].forEach.call(submits, function(...) { ... }).

  • Yes, very well aimed.

  • Very good, liked, that’s why I have to learn more javascript = D

0

Using the answer provided by @Tobymosque and searching a little more.

I arrived at this solution, which fits the case more, because as I commented the HTML comes via Ajax. Or Whether it’s a string, so basically I’d like to treat the string.

var doc = new DOMParser().parseFromString(msg, 'text/html');
var submits = doc.querySelectorAll("P input[type='submit']");
[].forEach.call(submits, function (elemento, indice){
    elemento.parentNode.removeChild(elemento);
});
var htmlFinal = doc.body.innerHTML
  • 1

    take a look at this jsPerf, it might be interesting to create a div to wrap the html than using the DOMParser to create a document.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.