Удаление курсива при выделении жирным

423

04 мая 2017, 14:26

Помогите, пожалуйста: при нажатии на кнопку "Заменить курсив полужирным начертанием" курсив после выделения жирным должен удаляться. Сейчас курсив жирным выделяется, но остаётся.

window.onload = function() { 
  $("#children").click(function() { 
    var $a = $(".one").children() 
    alert($a.text()); 
  }); 
  $("#contents").click(function() { 
    var $a = $(".one").contents() 
    alert($a.text()); 
  }); 
 
  $("#jQ").click(function() { 
    $('i').contents().filter(function() { 
        return this.nodeType == 3; 
      }) 
      .wrap('<strong></strong>') 
  }); 
  $("i").replaceWith($("i")); 
}

#ctnr div { 
  padding: 25px; 
  margin: 10px; 
  background-color: red; 
  height: 70px; 
  width: 140px; 
  float: left; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="ctnr"> 
  <div class='one'> 
    Текстовый узел 1 
    <p>Текстовый узел 2</p> 
    Текстовый узел 3 
  </div> 
  <input type="button" id='children' value="Метод children()"> 
  <input type="button" id='contents' value="Метод contents()"> 
  <p class='jQ'> 
    <i>jQuеry</i> — библиотека <i>JаvаSсript</i>, фокусирующаяся на взаимодействии 
    <i>JаvаSсript</i> и <i>HTML</i>. Библиотека <i>jQuеry</i> помогает легко получать доступ к любому элементу <i>DОM</i>, обращаться к атрибутам и содержимому элементов 
    <i>DОM</i>, манипулировать ими. Также библиотека <i>jQuеry</i> предоставляет удобный АPI по работе с <i>АJАX</i>. 
  </p> 
  <input type="button" id='jQ' value="Заменить курсив полужирным начертанием"> 
</div>

Answer 1

Ну вот так например:

$("#bt").on("click", function() { 
  $("i").replaceWith(function(){ 
    return $("<strong>", {html: $(this).html()}); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<i>Этот шрифт курсив </i> 
<br> 
 
<i>И еще </i> 
<br> 
 
<i>И еще больше шрифта </i> 
<br> 
<br> 
 
<input type="button" id="bt" value="Заменить">

Answer 2

нужно использовать $('i').remove

почитайте документацию для корректной настройки работы: http://api.jquery.com/remove/ или как вариант ещё такой http://api.jquery.com/removeAttr/