Move selected element to the end

Question

We have HTML code

<select id="mySelect">
 <optgroup label="First group" id="firstGrp">
   <option value="One">One</option>
   <option value="Two">Two</option>
</optgroup>
 <optgroup label="Second group" id="secondGrp">
   <option value="Three">Three</option>
   <option value="Six">Six</option>
   <option value="Four">Four</option>
   <option value="Five">Five</option>
 </optgroup>
</select>

I want to move <option value="Six">Six</option> to the end of <optgroup label="Second group" id="secondGrp"> .

So, I select necessary element and remove it.

var secondGrp = d3.selectAll("#secondGrp option");
var six = secondGrp.filter(function(d, i){ return d === "Six")})
six.remove();

Unfortunately, I have no idea how to add it at the end of the <option value="Six">Six</option> .

Answer 1

I'm late to this party, but I'd like to add to this conversation the new lower() and raise() functions, introduced in D3 4.0. Its very simple:

selection.raise() Re-inserts each selected element, in order, as the last child of its parent.

and:

selection.lower() Re-inserts each selected element, in order, as the first child of its parent.

So, all you need to do is this:

d3.select("[value='Six']").raise();

Check this fiddle, you can click the buttons and see it going up and down: https://jsfiddle.net/gerardofurtado/omk8r7dh/

The names here are a bit confusing, because "raise" will make "six" go down in the list, and "lower" will make it go up.

Answer 2

As an alternative to the answer by echonax you could just re-append the removed DOM element without the need to create and append a new one. This comes in handy if there are many attributes on this element.

d3.select("#secondGrp").append(function() {
  return d3.select("option[value=Six]").remove().node();
});

 d3.select("#secondGrp").append(function() { return d3.select("option[value=Six]").remove().node(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <select id="mySelect"> <optgroup label="First group" id="firstGrp"> <option value="One">One</option> <option value="Two">Two</option> </optgroup> <optgroup label="Second group" id="secondGrp"> <option value="Three">Three</option> <option value="Six">Six</option> <option value="Four">Four</option> <option value="Five">Five</option> </optgroup> </select> 

This make use of the fact, that selection.remove() will return the selection of elements which got removed. This is the use case it was designed for:

however, you can pass a function to selection.append or selection.insert to re-add elements.

Answer 3

Here's the result: https://jsfiddle.net/bL6aavxr/1/

You can use an attribute selector to remove the value like this, no need for filter:

d3.select("[value='Six']").remove();

then you can "append" your desired option with whatever attributes and text you like:

d3.select("#secondGrp").append('option').attr("value", "Six").html("Six");