Как разместить значение setattribute на веб-странице и обернуть текст, чтобы кнопка не двигалась

Я использую значение setAttribute для создания кнопки удаления - как мне переместить кнопку подальше от введенного текста и обернуть текст, чтобы кнопка находилась в том же месте?

Вот скрипт js - JS, похоже, не работает на нем, но он работает на моем ПК

https://jsfiddle.net/lewisjames101/aqxwuwbg/

HTML

<!DOCTYPE html>
<html lang = "en" dir = "ltr">
    <head>
        <meta charset = "utf-8">
        <title>ToDoList</title>
    </head>
    <body>
         <h1>To do list</h1>
         <form id = "todoform">
         <input id = "todoinput">
         <button type = "button" onclick = "todolist()">Add</button>
          </form>
          <ol id = "todolist">
          </ol>
            <script src = "main.js"></script>
    </body>
</html>


JS
function todolist(){
    var item = document.getElementById("todoinput").value
    var text = document.createTextNode(item)
    var newitem = document.createElement("li")
    newitem.appendChild(text)
    document.getElementById("todolist").appendChild(newitem)
    document.getElementById ('todoinput').value = "";

    var removeTask = document.createElement('input');
    removeTask.setAttribute('type', 'button');
    removeTask.setAttribute("value", "Remove task");
    removeTask.setAttribute("id", "removeButton");
    removeTask.addEventListener('click',
     function(e) {
       confirm ("Are you sure?"); newitem.parentNode.removeChild(newitem);
    }, false);
    newitem .appendChild(removeTask);
}

Как разместить значение setattribute на веб-странице и обернуть текст, чтобы кнопка не двигалась

javascript css html

30.05.2018 20:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте следующий стиль

#removeButton {
  margin-left: auto;
}
ol li {
  margin-top: 10px;
  width: 100%; 
}
ol li div {
  display: flex;
  align-items: flex-start;
}

 
#removeButton {
  margin-left: auto;
}
ol li {
  margin-top: 10px;
  width: 100%; 
}
ol li div {
  display: flex;
  align-items: flex-start;
}

<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
    <meta charset = "utf-8">
    <title>ToDoList</title>
    <script>
    function todolist(){
var item = document.getElementById("todoinput").value
var text = document.createTextNode(item)
var newitem = document.createElement("li")
var newitemDiv = document.createElement("div")

var newitemSpan = document.createElement("span")
newitemSpan.appendChild(text)
newitemDiv.appendChild(newitemSpan)
newitem.appendChild(newitemDiv)
document.getElementById("todolist").appendChild(newitem)
document.getElementById ('todoinput').value = "";
var removeTask = document.createElement('input');
removeTask.setAttribute('type', 'button');
removeTask.setAttribute("value", "Remove task");
removeTask.setAttribute("id", "removeButton");
removeTask.addEventListener('click',
 function(e) {
   confirm ("Are you sure?"); newitem.parentNode.removeChild(newitem);
}, false);
newitemDiv .appendChild(removeTask);
}

    </script>
</head>
<body>
     <h1>To do list</h1>
     <form id = "todoform">
     <input id = "todoinput">
     <button type = "button" onclick = "todolist()">Add</button>
      </form>
      <ol id = "todolist">
      </ol>
        
</body>
</html>

Как обернуть текст так, чтобы кнопка всегда находилась на одном и том же месте?

— 30.05.2018 20:19

Вы хотите, чтобы все кнопки были выровнены?

— 30.05.2018 20:20

все кнопки убрать, да

— 30.05.2018 20:21

Обновил ответ. Для этого мне пришлось немного изменить js

— 30.05.2018 20:34

Текст не переносится

— 30.05.2018 20:41

это упаковка для меня. Пожалуйста, проверьте эту ссылку jsfiddle.net/#&togetherjs=Ksi46xpf1j

— 30.05.2018 20:45

строка 6 на втором снимке экрана есть ли способ обернуть текст так, чтобы кнопки удаления были встроенными?

— 30.05.2018 20:57

А вот упаковка для меня: O. Я не знаю, почему это не работает на вашем компьютере. Вы включили мой CSS?

— 30.05.2018 21:02

ibb.co/bWVfHd Смотрите эту ссылку, у меня работает. Может быть, на это влияет какой-то другой CSS на вашей странице

— 30.05.2018 21:06

связан с новым файлом js, и он сработал, спасибо за вашу помощь, ваш код работал - извините за боль :)

— 30.05.2018 21:17

30.05.2018 20:16

Другие вопросы по теме

При открытии модального окна мой основной вид становится черным MVC

Стилизация границы ввода при первом фокусе с использованием стилизованных компонентов

Недопустимое значение свойства при использовании сглаживания и оттенков серого в Mozilla

Font-face не работает на iPhone

Не удается отобразить <ul> при наведении курсора на другой <li>

Почему не работает набор правил для нескольких селекторов :: selection?

Я не могу заставить свой div использовать фиксированную высоту. Сделали обширные тесты

Два гибких слайдера на одной странице

Vuejs скрывает модальное окно при щелчке по нему

Angular ngcontent портит стиль начальной загрузки

Как разместить значение setattribute на веб-странице и обернуть текст, чтобы кнопка не двигалась

Ответы 1

Другие вопросы по теме

Похожие вопросы