jQuery remove attribute before appending HTML

Question

I want to append HTML of an element, the HTML consists of different inputs, each of the inputs has an attribute disabled. How can I remove that attribute before appending?

The following code appends without removing the disabled attribute. If I try something like find('select').removeAttr('disabled'); then it removes all other html and dispalys only that part.

$('button').on('click', function(){

var content = $(this).parent().find('.temp').html();

//content1 = $(content).find('select').removeAttr('disabled');

$('.list').append(content);

});

.temp {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
 
  <button>Add</button>

  <div class="list">
    <p>content</p>    
  </div>

<div class="temp">
  
  <div class="row">
    <select disabled>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      <input type="text" disabled>
  </div>      
      
 </div>

Check this, https://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery Also this one, https://stackoverflow.com/questions/13626517/how-to-remove-disabled-attribute-using-jquery — intekhab, Jun 26 '20 at 08:35

score 1 · Accepted Answer · answered Jun 26 '20 at 08:35

$('button').on('click', function(){

var content = $(this).parent().find('.temp');

content.find('select').removeAttr('disabled');

$('.list').append(content.html());

});

.temp {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
 
  <button>Add</button>

  <div class="list">
    <p>content</p>    
  </div>

<div class="temp">
  
  <div class="row">
    <select disabled>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      <input type="text" disabled>
  </div>      
      
 </div>

Referring Jquery removeAttr doc - https://api.jquery.com/removeAttr/ Note: Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 8, 9 and 11. To avoid potential problems, use .prop() instead. Check if this `NOTE` is applicable on `DISABLED` props — intekhab, Jun 26 '20 at 08:49

score 0 · Answer 2 · answered Jun 26 '20 at 08:39

You can create HTML snippets to JS file, add append it

$('button').on('click', function() {
  const html = `
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    <input type="text">
  `;
  $('.list').append(html);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">

  <button>Add</button>

  <div class="list">
    <p>content</p>
  </div>

</div>

jQuery remove attribute before appending HTML

2 Answers2