CODEWITHSUNDEEP
javascriptjquery
Jakub
Jakub

Reputation: 123

Replace HTML tag if wrapper contains specific element

I want to replace <fieldset> into <div> if inside the fieldset there is no input. I'm going into this direction but have problems to finish it.

(function ($) {
    const selector = {
        fieldsetWrapper: '.fieldsetWrapperClass',
        radioWrapper: '.class-for-radio-input'
    };

    class FieldsetReplace {
        constructor(element) {
            this.$fieldsetWrapper = $(element);
            this.$fieldsetWrapper= this.$fieldsetWrapper.find(selector.fieldset);
            this.replaceFieldset();
        }

        replaceFieldset() {
           if (!this.fieldsetWrapper.has("input")) {
                $('fieldset', this).replaceWith(function(){
                    return $("<div />").append($(this).contents());
                });
            }
        }
   }

Upvotes: 1

Views: 153

Answers (2)

zer00ne
zer00ne

Reputation: 44088

DOM Methods and Properties

The following demo uses the following:

Demo

Details commented in demo

// Collect all <fieldset>s into a NodeList
var sets = document.querySelectorAll('fieldset');

// For each <fieldset>...
/* 
if a <fieldset> does NOT have an <input>...
get <fieldset>'s parent...
create a <div> and...
insert <div> before <fieldset>.
Get the children tags of <fieldset> and into an array and...
iterate the children tags of <fieldset> then...
append the tags to the <div>.
Remove <fieldset>
*/
sets.forEach((set) => {
  if (!set.contains(set.querySelector('input'))) {
    var parent = set.parentNode;
    var div = document.createElement('div');
    set.insertAdjacentElement('beforebegin', div);
    var content = Array.from(set.children);
    for (tag of content) {
      div.appendChild(tag);
    }
    parent.removeChild(set);
  }
});
div {
  border: 1px dashed red;
}
<fieldset>
  <input>
</fieldset>

<fieldset>
  <div>Content</div>
</fieldset>

<fieldset>
  <input>
</fieldset>

<fieldset>
  <input>
</fieldset>

<fieldset>
  <div>Content</div>
</fieldset>

Upvotes: 0

BCDeWitt
BCDeWitt

Reputation: 4773

In your provided code, the line with $('fieldset', this) passes your FieldsetReplace instance to jQuery and it's not going to know what to do with that. You also seem to be missing a selector.fieldset value, but I'm thinking that was probably just a typo in your code snippet.

I've simplified your code down to the part that specifically pertains to your question in the snippet below. It seems like you're just having a rough time understanding the this keyword in JavaScript. In jQuery methods, this usually represents a single element in the jQuery object. But, outside of those, it operates very differently.

For more information about this, feel free to ask in a comment or see MDN's documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

const replaceFieldsetsWithoutInput = function (elementOrSelector) {
    const $fieldsets = $(elementOrSelector).find('fieldset:not(:has(input))')
    $fieldsets.replaceWith(function() {
    	return $('<div />').append($(this).contents())
    })
}

replaceFieldsetsWithoutInput('.js-fieldset-wrapper')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="js-fieldset-wrapper">

  <!-- Unaffected - has an input -->
  <fieldset>
    <input value="test 1" />
  </fieldset>

  <!-- Should be replaced with a <div> -->
  <fieldset>Test 2</fieldset>

  <!-- Should also be replaced with a <div>, different contents -->
  <fieldset>Test 3</fieldset>

</div>

Upvotes: 1

Related Questions