Let's put the convenience in convenience method (in addition to keeping a separation of concerns!! Here's an jQuery function titled **`upsert`** that will either locate an existing element or create a new element if none exist.

### So just include this jQuery anywhere:



    $.fn.upsert = function(selector, htmlString) {
      // upsert - find or create new element
      // find based on css selector   	https://api.jquery.com/category/selectors/
      // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
      var $el = $(this).find(".message");
      if ($el.length == 0) {
        // didn't exist, create and add to caller
        $el = $("<span class='message'></span>");
        $(this).append($el);
      }

      return $el;
    }; 

### Then you could use like this:



    $("input[name='choice']").click(function(){
      var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
      // guaranteed to have element - update if we want
      $el.html("You've chosen "+this.value)
    })

Ideally, it would be nice to simply pass in a selector and have jQuery create an element that matches that selector automatically, but it doesn't seem like there's a light weight vehicle for [creating an element][create] based off the CSS Selector syntax (based on [Question 1][Q1] & [Question 2][Q2]).

Some further enhancements might provide more fine tuned control for [DOM insertion][DOM] instead of just always using [`.append()`][append].

### [Demo in jsFiddle][fiddle] |  Demo in Stack Snippets:





    $.fn.upsert = function(selector, htmlString) {
      // upsert - find or create new element
      // find based on css selector   	https://api.jquery.com/category/selectors/
      // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
      var $el = $(this).find(".message");
      if ($el.length == 0) {
        // didn't exist, create and add to caller
        $el = $("<span class='message'></span>");
        $(this).append($el);
      }

      return $el;
    }; 

    $("input[name='choice']").click(function(){
      var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
      // guaranteed to have element - update if we want
      $el.html("You've chosen "+this.value)
    });





    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <form action="">
      <div>
        <input type="radio" id="ca" name="choice" value="A" /><label for='ca'>A</label>
        <input type="radio" id="cb" name="choice" value="B" /><label for='cb'>B</label>
        <input type="radio" id="cc" name="choice" value="C" /><label for='cc'>C</label>
      </div>
    </form>






[fiddle]: https://jsfiddle.net/KyleMit/z13swd33/
[Q1]: https://stackoverflow.com/q/3518650/1366033
[Q2]: https://stackoverflow.com/q/10586678/1366033
[create]: http://api.jquery.com/?s=createElement()
[append]: http://api.jquery.com/append/
[DOM]: http://api.jquery.com/category/manipulation/dom-insertion-inside/

I have two functions that generate DOM elements. They both attempt to create the same container element. (I'd prefer not to enforce a specific run order for these functions, or tightly couple them to the side-effect of creating this element). I've been trying to discover a method that would get an element if it exists, or create a single instance of it if it doesn't, and return a jQuery object containing that element or all the matched elements if they already exist.

I haven't found this to exist in searching through jQuery documentation, but I thought I'd ask here to see if anyone else has encountered a similar problem and has suggestions.

jQuery "get or create element" convenience method

Another option is to [attach multiple elements to a single event listener][1] by using [**delegated handlers**][2]

You can attach the parent listener to `document` or any appropriate parent node.  Then you can check the event was raised by the appropriate target using the [`Element.matches()`][3] API or anything on `event.target`

```js
document.getElementById("languages").addEventListener('click', function (event) {
    if (event.target && event.target.matches("input[type='radio']")) {
        // do something here ...
    }
});
```

This is roughly equivalent to the following jQuery syntax which uses [`.on()`][4] to provide delegation

```js
$("#languages").on("click", "input[type='radio']", function(event) {
    // do something here ...
});
```

If you want to extend the [`EventTarget.addEventListener()`][5] prototype, you can wrap with your own method:

```js
window.EventTarget.prototype.addDelegatedListener = function(type, delegateSelector, listener) {
    this.addEventListener(type, function (event) {
        if (event.target && event.target.matches(delegateSelector)) {
            listener.call(event.target, event)
        }
    });
}
```

Then use like this:

```
document.addDelegatedListener("click", "input[type='radio']", function(event) {
    // do something here ...
});
```

### Demo in Stack Snippets





    // example 1 - regular add event listener
    document.getElementById("languages").addEventListener('click', function (event) {
        if ( event.target && event.target.matches("input[type='radio']") ) {
            console.log(event.target.value)
        }
    });

    // example 2 - reusable delegated listener
    window.EventTarget.prototype.addDelegatedListener = function(type, delegateSelector, listener) {
        this.addEventListener(type, function (event) {
            if (event.target && event.target.matches(delegateSelector)) {
                listener.call(event.target, event)
            }
        });
    }

    let parent = document.getElementById("weekdays")
    parent.addDelegatedListener("click", "input[type='radio']", function(event) {
        console.log(this.value)
    });




    h3 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 1.1em;
    }
    code {
        background: #e9e9e9;
        padding: 1px 4px;
        border-radius: 3px;
    }
    label input {
        vertical-align: text-top;
    }




    <h3>Languages <code>addEventListener</code> + <code>Element.matches</code></h3>
    <div id="languages">
      <label><input type="radio" name="languages" value="HTML"> HTML </label>
      <label><input type="radio" name="languages" value="JS"> JS </label>
      <label><input type="radio" name="languages" value="CSS"> CSS </label>
    </div>

    <h3>Weekdays <code>EventTarget.prototype.addDelegatedListener</code></h3>
    <div id="weekdays">
      <label><input type="radio" name="days" value="Mon"> Mon </label>
      <label><input type="radio" name="days" value="Tue"> Tue </label>
      <label><input type="radio" name="days" value="Wed"> Wed </label>
    </div>



[1]: https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
[2]: https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
[3]: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
[4]: http://api.jquery.com/on/
[5]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

I have several radio buttons with the same name. Like this:

    <form name="formA">
    <input type="radio" name="myradio" value="A"/>
    <input type="radio" name="myradio" value="B"/>
    <input type="radio" name="myradio" value="C"/>
    <input type="radio" name="myradio" value="D"/>
    </form>
Now I have to add event listener through javascript to all the radio buttons. If the below pseudocode is wrong, then please tell me how to do it-

    var radios = document.forms["formA"].elements["myradio"];
      for(radio in radios) {
        radio.onclick = function() {
            alert(radio.value);
        }
    }



Attach event listener through javascript to radio button

So dandavis is right - the library needs time to load before calling the initializer on it.  A naive implementation could just wait a short amount of time and try again like this:



    setTimeout( function() {
      $(".select2").select2();
    }, 2000);

### Simple Demo in Stack Snippets:





    $(function(){
      
      var selet2Html =
        '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
        '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
        '<select class="select2">' +
        '  <option value="AK">Alaska</option>' +
        '  <option value="HI">Hawaii</option>' +
        '</select>' +
        '<script >' +
        '  setTimeout( function() {' +
        '    $(".select2").select2();' +
        '  }, 2000);' +
        '<\/script>';
       
      $("body").append(selet2Html);
      
    });



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>



A more sophisticated solution would wait until `$.fn.select2` showed up in the DOM.  

**Enter `OnAvailable`**

You can call it like this:

    onAvailable('$.fn.select2', function() {
      alert('we did it');
    });

Here's the function that will poll the global namespace for your variable to popup.  It uses Alnitak's `Object.byString` solution from [Accessing nested JavaScript objects with string key][1]
  
    function onAvailable(listenFor, callback) {
      var interval = window.setInterval(function() {
        if (Object.byString(window, listenFor)) {
          clearInterval(interval);
          callback()
        }
      }, 100);
    };

### Advanced Demo in Stack Snippets





    function onAvailable(listenFor, callback) {
      var interval = window.setInterval(function() {
        if (objectFromString(window, listenFor)) {
          clearInterval(interval);
          callback()
        }
      }, 100);
    };

    function objectFromString(o, s) {
      s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
      s = s.replace(/^\./, '');           // strip a leading dot
      var a = s.split('.');
      for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
          o = o[k];
        } else {
          return;
        }
      }
      return o;
    }

    $(function(){
      
      var selet2Html =
        '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
        '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
        '<select class="select2">' +
        '  <option value="AK">Alaska</option>' +
        '  <option value="HI">Hawaii</option>' +
        '</select>' +
        '<script >' +
        '  onAvailable("$.fn.select2", function() {' +
        '    $(".select2").select2();' +
        '  });' +
        '<\/script>';
       
      $("body").append(selet2Html);
      
      
    });



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>



[1]: https://stackoverflow.com/a/6491621/1366033

If I include a script with an external source and then try to parse using jQuery - it will download the script, but won't load it into the DOM.  I'm using using [`.append()`][API append], but this seems to be the case for any other jQuery DOM insertion method.

### Here's an example in Stack Snippets





    $(function(){
      
      var selet2Html =
        '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
        '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
        '<select class="select2">' +
        '  <option value="AK">Alaska</option>' +
        '  <option value="HI">Hawaii</option>' +
        '</select>' +
        '<script >' +
        '  $(function() {' +
        '    $(".select2").select2();' +
        '  });' +
        '<\/script>';
        
      $("body").append(selet2Html);
      
    });



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>



Even though this will download the script in the network tab:

![Network Activity][Network Activity]

It will still return the following error (indicating that the external library - select2 - never loaded):

![Uncaught TypeError: $(...).select2 is not a function][Console Error]

I'd prefer not to use [`$.getScript()`][API getScript] as I'm actually loading this string dynamically with [`.load()`][API load], so I'm not sure if it's going to contain any external scripts or not.

How can I get it to load the external library?

[API append]: http://api.jquery.com/append/
[API getScript]: https://api.jquery.com/jquery.getscript/
[API load]: http://api.jquery.com/load/

[Network Activity]: http://i.imgur.com/BlcxVQi.png
[Console Error]:    http://i.imgur.com/gQmwIA6.png

jQuery append will download external src in script tags, but won't load into DOM

Here's an adaption of James's vanilla JS implementation that should work

```js
for (const node of document.querySelectorAll("table .components-drop-area")) {
  const parent = node.parentNode;
  while (node.children.length>0) {
    let child = node.children[0];
    node.removeChild(child);
    parent.insertBefore(child, node);
  }
  parent.removeChild(node);
}
```

Looping over the elements is tricky since we're modifying the collection during the iteration





    for (const node of document.querySelectorAll("table .components-drop-area")) {
      const parent = node.parentNode;
      while (node.children.length>0) {
        let child = node.children[0];
        node.removeChild(child);
        parent.insertBefore(child, node);
      }
      parent.removeChild(node);
    }

    // The <div> contents have now been extracted, and the <div> elements removed
    console.log(document.querySelector('table').innerHTML);



    <table>
      <tbody>
        <tr>
          <th>
            <div class="components-drop-area">
              <p>aa</p>
              <p>bb</p>
            </div>
          </th>
        </tr>
        <tr>
          <th>
            <div class="components-drop-area">
              <p>cc</p>
              <p>dd</p>
            </div>
          </th>
        </tr>
      </tbody>
    </table>

I'm building an e-mail constructor and when the user saves the template I just send the HTML to the server. But I need to remove the drap & drop element to send it to the server.

I'm not very good with DOM manipulation so I don't know where to start from.

This is my HTML:

    <table>
      <tbody>
        <tr>
          <th>
            <div class="components-drop-area">
              <p>aa</p>
              <p>bb</p>
            </div>
          </th>
        </tr>
        <tr>
          <th>
            <div class="components-drop-area">
              <p>cc</p>
              <p>dd</p>
            </div>
          </th>
        </tr>
      </tbody>
    </table>

I need to remove all the `.components-drop-area` divs. Something like that:

    <table>
      <tbody>
        <tr>
          <th>
            <p>aa</p>
            <p>bb</p>
          </th>
        </tr>
        <tr>
          <th>
            <p>cc</p>
            <p>dd</p>
          </th>
        </tr>
      </tbody>
    </table>

I stopped my code here:

    var table = document.querySelector('table').cloneNode(true)
    
    let dropAreas = table.querySelectorAll('.components-drop-area')
    
    console.log(table, dropAreas)

How can I loop and remove desired elements while retaining their content?